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, именно это значение будет влиять на расчет высоты блоков.

Если по макету высота блока 150px, а размер промежутков 10px, то количество строк  рассчитывается следующим образом: 150 / 10 + 1 = 16. Поэтому в нашем примере  для первого блока задано grid-row-end: span 16. Для остальных блоков количеств строк рассчитывается аналогично. 

▎Горизонтальное позиционирование

grid-template-columns

Это свойство отвечает за размеры и расположение колонок в контейнере.

Мы используем значение repeat(), позволяющее повторять набор правил для столбцов.

Указав максимальное количество колонок 2 и минимальную ширину колонки 200px, мы обеспечиваем горизонтальную адаптивность сетки.

Подробное о реализации автоматического заполнения, можно прочитать в этой статье:

https://css-tricks.com/an-auto-filling-css-grid-with-max-columns/

▎Итого

Если высота блоков в макете кратна значению промежутка (grid-gap), легко совместить точную верстку (Pixel Perfect) с адаптивностью. 

Для автоматического растягивания блоков по высоте используйте grid-auto-rows: auto. Высоту блоков можно задать, указав количество занимаемых строк, вычисляемое по формуле: Высота блока в макете / Значение промежутка + 1. 

Для обеспечения адаптивности по горизонтали достаточно указать максимальное количество колонок и минимальную ширину колонки, после которой блоки будут переходить на новую строку.