CSS Grid с автозаполнением и максимальным количеством столбцов минимального размера

От автора: мы реализовали новую классную технику автозаполнения в CSS Grid в ядре Drupal 10. Думаю, ей можно поделиться с миром.

Требования:

CSS Grid с автозаполнением в действии

Ниже показано, как должна вести себя CSS Grid с автозаполнением, если слева от нее изменяется ширина div элемента.

Если не хотите читать, можете просто скопировать код ниже.

.grid-container { /** * User input values. */ --grid-layout-gap: 10px; --grid-column-count: 4; --grid-item--min-width: 100px; /** * Calculated values. */ --gap-count: calc(var(--grid-column-count) - 1); --total-gap-width: calc(var(--gap-count) * var(--grid-layout-gap)); --grid-item--max-width: calc((100% - var(--total-gap-width)) / var(--grid-column-count)); display: grid; grid-template-columns: repeat(auto-fill, minmax(max(var(--grid-item--min-width), var(--grid-item--max-width)), 1fr)); grid-gap: var(--grid-layout-gap);
}

Демонстрация

Теория и инструменты CSS Grid с автозаполнением

Код выше использует несколько современных CSS инструментов, среди которых CSS Grid функции repeat(), auto-fill(), minmax(), CSS max() и calc(). Ниже рассказываю, как это все работает.

CSS Grid функция auto-fill()

auto-fill() – ключ ко всему. Необходимо чтобы каждая строка заполнялась максимальным числом колонок. Детально прочитать про auto-fill можете в замечательной статье Sara Soueidan «the difference between auto-fill and auto-fit». В этой статье есть видео, показывающее принцип работы.

Но как убедиться, что не создается слишком много колонок?

CSS функция max()

Далее нам понадобится CSS функция max()! Нам необходимо чтобы каждая ячейка сетки могла достигать в ширину некий максимальный процент. Скажем, 25% для сетки из 4 колонок. Однако ширина не может быть меньше заданной пользователем.

То есть имея сетку из четырех колонок с минимальной шириной 100px, функция max() будет выглядеть следующим образом: max(25%, 100px).

Значение 25% не совсем корректно, ведь мы не учитываем отступы внутри сетки. На самом деле функция будет примерно такой:

max(calc(25% - <grid-gap-for-one-cell>), 100px)

С помощью calc() в CSS можно вычислить значение! (Кто сказал, что CSS не язык программирования?)

--gap-count: calc(var(--grid-column-count) - 1);
--total-gap-width: calc(var(--gap-count) * var(--grid-layout-gap));
--grid-item--max-width: calc((100% - var(--total-gap-width)) / var(--grid-column-count));

Мы рассмотрели еще один кирпичик для нашего механизма! Эти стили укажут ячейкам сетки, чтобы те занимали максимальную ширину с учетом заданного пользователем числа колонок, но при этом не были по ширине менее 100px.

max(100px, var(--grid-item--max-width))

CSS Grid функция minmax()

Мы почти закончили, остался последний ингредиент: сетка не всегда растягивается на всю ширину родительского контейнера.

Именно это решает функция minmax(). CSS код ниже задает минимальную ширину для <grid-item-width>, и если есть свободное место, функция растягивает все ячейки равным образом для заполнения всей ширины родителя!

minmax(<grid-item-width>, 1fr)

Соберем все вместе!

Собрав все кусочки выше воедино, мы получаем код ниже, который делает ровно то, что мы хотели!

--gap-count: calc(var(--grid-column-count) - 1);
--total-gap-width: calc(var(--gap-count) * var(--grid-layout-gap));
--grid-item--max-width: calc((100% - var(--total-gap-width)) / var(--grid-column-count)); grid-template-columns: repeat(auto-fill, minmax(max(var(--grid-item--min-width), var(--grid-item--max-width)), 1fr));

CSS это весело!

CSS прошел очень долгий путь. Я вдоволь повеселился, работая над этим способом, и рад, что подобные кейсы теперь возможны без применения JavaScript.

Особая благодарность Andy Blum. Он предложил использовать auto-fill() вместо auto-fit(). Также огромная благодарность всем разработчикам и аналитикам, которые писали спецификации за создание и стандартизацию таких продвинутых функций.

Автор: Mike Herchel

Источник: css-tricks.com

Редакция: Команда webformyself.

Читайте нас в Telegram, VK, Яндекс.Дзен