CSS Grid Layout: Асимметричная адаптивная сетка
В веб-дизайны сетки, как в Pinterest уже давно не являются чем-то новым. Но что, если нужно сделать блоки различной высоты, при этом сохранив адаптивность. Оказывается, это можно сделать, используя только стандартные возможности CSS Grid Layout.
Рассмотрим пример реализации на CodePen. Мы видим 5 блоков с ассиметричным расположением. Блоки 2, 3 и 4 имеют одинаковую высоту, в то время как блоки 1 и 5 имеют отличные от остальных блоков высоты. При изменении ширины окна браузера блоки уменьшаются в ширину, и в какой-то момент переходят в одну колонку. В блоке 4 находится текст, который при изменении ширины блока растягивает блоки 3 и 4 по высоте, сохраняя при этом структуру сетки.
▎Как это работает
CSS Grid — это способ разделить контейнер на строки и столбцы. Для создания асимметричной структуры нужно указать, сколько строк должен занимать каждый блок. Для этого понадобятся следующие свойства:
grid-gap
Это свойство задает размер промежутков между блоками по обеим осям.
grid-auto-rows
Это свойство задает высоту строки в контейнере. Значение для этого свойства можно указывать в разных единицах измерения. Но чтобы гарантировать, что текст не будет выходить за пределы блоков, нужно указать auto в качестве значения (значение по умолчанию).
В этом случае размер строк определяется наибольшим максимальным размером содержимого в дорожке.
Важно отметить, что промежутки между строками являются частью строк и влияют на высоту блоков.
grid-row-end
Это свойство определяет сколько строк занимает элемент, или на какой строке элемент заканчивается в сетке.
Мы используем это свойство со значение span n, где n это количество строк, которое должен охватывать блок.
В нашем примере высота строки (grid-auto-rows: auto), это значит, что фактически она равна нулю и увеличивается только тогда, когда содержимое будет растягивать блок. Однако, поскольку задан grid-gap, именно это значение будет влиять на расчет высоты блоков.
Если по макету высота блока 150 px, а размер промежутков 10 px, то количество строк рассчитывается следующим образом: 150 / 10 + 1 = 16. Поэтому в нашем примере для первого блока задано grid-row-end: span 16. Для остальных блоков количеств строк рассчитывается аналогично.
▎Горизонтальное позиционирование
grid-template-columns
Это свойство отвечает за размеры и расположение колонок в контейнере.
Мы используем значение repeat (), позволяющее повторять набор правил для столбцов.
Указав максимальное количество колонок 2 и минимальную ширину колонки 200 px, мы обеспечиваем горизонтальную адаптивность сетки.
Подробное о реализации автоматического заполнения, можно прочитать в этой статье:
https://css-tricks.com/an-auto-filling-css-grid-with-max-columns/
▎Итого
Если высота блоков в макете кратна значению промежутка (grid-gap), легко совместить точную верстку (Pixel Perfect) с адаптивностью.
Для автоматического растягивания блоков по высоте используйте grid-auto-rows: auto. Высоту блоков можно задать, указав количество занимаемых строк, вычисляемое по формуле: Высота блока в макете / Значение промежутка + 1.
Для обеспечения адаптивности по горизонтали достаточно указать максимальное количество колонок и минимальную ширину колонки, после которой блоки будут переходить на новую строку.
