Grid-лейаут

Свойство CSS Grid позволяет сделать сетку, состоящую из строк и колонок. Grid дает возможность делать сложные лейауты и легко управлять положением элементов внутри сетки.

При настройке Grid вы можете задавать следующие параметры:

Количество колонок и строк в родительском элементе, для которого задано это свойство.

Направление расположения ячеек по колонкам и по строкам.

Выравнивание и распределение во всех ячейках грида.

Расстояния между колонками и строками.

Размеры колонок и строк в единицах измерения fr (фракции).

Минимальные и максимальные значения в размерах колонок и строк.

Выравнивание и распределение в конкретной ячейки грида.

Позиционирование конкретной ячейки грида, а также ее размеры.

В чем разница между Flex и Grid

Flex позволяет автоматически расставить дочерние элементы в родительском блоке в одном направлении — по горизонтали или по вертикали.

Grid позволяет расставить дочерние элементы в родительском блоке по двум осям — по строкам и по колонкам.

Когда лучше использовать Flex

Flex удобнее использовать, если есть один блок, внутри которого нужно распределить элементы по одной оси — в одну строку или в одну колонку. Например, это может быть меню. В этом случае будет проще с помощью Flex сделать распределение элементов с нужными отступами.

Когда лучше использовать Grid

Grid удобнее использовать, если у вас сложная сетка, где некоторые элементы могут занимать несколько строк или колонок. В варианте с Flex для такой сетки пришлось бы использовать много лишних оберток.

Вложенность в Grid

Вы можете создавать вложенность в гриде — любую ячейку грид-сетки можно сделать гридом. Вложенность может быть неограниченная. Это позволяет создавать сложные сетки.

Как установить блоку свойство Grid

На вкладке Дизайн правой панели в разделе Авто-лейаут выберите Отображение — Grid , кликнув на соответствующую иконку.

Далее задайте нужное количество колонок и строк в гриде.

Настройки Grid

Заполнение (Auto flow)

Задает направление размещения ячеек в гриде —  по строкам или по колонкам:

По строкам (Row) — ячейки размещаются горизонтально по строкам слева-направо (буквой Z):

По колонкам (Column) — ячейки размещаются вертикально по колонкам сверху-вниз (буквой И):

Распределение (Justify) и Выравнивание (Align)

Задают выравнивание содержимого ячеек по горизонтали и вертикали.

Параметры Распределения (Justify):

По левому краю

По центру

По правому краю

Растянуть

По базовой линии

Параметры Выравнивания (Align):

По верхнему краю

По центру

По нижнему краю

Растянуть

По базовой линии

Дополнительные параметры выравнивания (More alignment options)

Задают выравнивание колонок и строк в сетке.

По левому краю / По верхней границе

По центру

По правому краю / По правой границе

Растянуть

Распределить равномерно от начала до конца (space-between)

Распределить равномерно, с пространством вокруг всех дочерних элементов (space-around)

Распределить равномерно, с пространством вокруг всех дочерних элементов и краев контейнера (space evenly)

Расстояние между ячейками (Gap)

Задает расстояние между строками и между колонками грида — Row gap и Column gap.

Расстояние можно установить в следующих единицах измерения: px, em, rem, %, vw, vh.

Dense

Позволяет заполнить пустые ячейки в гриде. При включенной опции Dense на пустое место в сетке встает ближайший элемент, подходящий по размеру, а остальные элементы сдвигаются в конец.

Это может быть полезно в случае сложных сеток, а также при выводе в грид динамических данных.

Для включения опции Dense кликните на соответствующую иконку:

Настройка размеров ячеек в гриде

Чтобы открыть режим редактирования размеров ячеек, нажмите кнопку Редактировать сетку (Edit grid).

В открывшейся панели Настройки сетки (Grid Settings) вы можете задать размеры колонок и строк.

Для установки размеров можно использовать не только обычные единицы измерения (px, %, em и т.д.), но и специальные единицы измерения для гридов — fraction (fr).

Fractions (Фракции)

Fraction (fr) — относительная единица измерения, которая показывает, какую часть (долю) сетки занимает ячейка по ширине или по высоте. Когда вы задаете размер в fr, то система вычисляет долю элемента в сетке в зависимости от количества и размеров других элементов в строке или в столбце.

Например, если у вас есть 4 колонки и для каждой из них задана ширина 1 fr, то они

занимают по одной равной доле грида.

Если для одной колонки задать ширину 2 fr, то она будет в два раза шире всех остальных.

Значения во фракциях могут быть не только целыми числами, но и десятичными дробями. Например, можно задать значение 0.25 fr.

Чем фракции отличаются от процентов?

Если задать ширину колонок в процентах, то при удалении или добавлении колонок придется менять значения ширины для каждой из них. Например, если было 4 колонки по 25%, а потом одну удалили, то ширина колонок не изменится и останется пустое пространство.

Если использовать фракций, то ширина колонок будет автоматически меняться так, чтобы они занимали всю строку. Поэтому если удалить одну колонку, то остальные займут все пространство строки, и не нужно будет менять их ширину.

Минимальный и максимальный размер и Авто-заполнение

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

Чтобы установить эти опции, откройте настройки размеров для колонки, кликнув на соответствующую иконку:

Затем в открывшейся панели перейдите во вкладку Мин./Макс. и задайте нужные значения.

Параметры:

Мин. (Min) — минимальный размер, который будет занимать ячейка.

Макс. (Max) — максимальный размер, который будет занимать ячейка.

Авто-заполнение (Auto-fit) — опция, которая позволяет вместить в строку или в столбец наибольшее количество ячеек с размерами в диапазоне Мин.-Макс.

Как это работает на практике:

Например, зададим для колонки: минимальный размер 200px, максимальный размер 1 fr и авто-заполнение.

1. Система размещает в строке столько ячеек с шириной 200px, сколько получается.

2. Если в строке осталось пустое пространство, система увеличивает ширину ячеек до максимально возможной, чтобы они равномерно распределялись по ширине строки.

Таким образом, на широком экране в строке будет помещаться 4 ячейки по 200px. При уменьшении экрана, когда 4 ячейки перестанут помещаться в строке, сетка перестроится на 3 колонки, а потом и на 2 колонки. На самых маленьких экранах ячейки выстроятся в одну колонку. При любой ширине экрана ячейки будут равномерно растягиваться на всю ширину строки.

Настройки ячейки сетки (Grid Cell)

Эти настройки позволяют задать количество колонок и строк, которые занимает ячейка, а также настроить ее позиционирование в гриде.

Чтобы настроить параметры ячейки сетки, выберите нужную ячейку внутри грида. На правой панели появятся настройки Ячейка сетки (Grid Cell) .

Span

Эта опция позволяет настроить ячейку так, чтобы она занимала несколько колонок или строк.

Параметры:

Колонки (Column span)   — сколько колонок должна занимать ячейка

Строки (Row span) — сколько строк должна занимать ячейка

Например, для ячейки 1 зададим параметры: Колонки — 2 и Строки — 2. А для ячейки 6: Колонки — 1 и Строки — 2.

Вот так будет выглядеть сетка в этом случае:

Распределение (Justify) и Выравнивание (Align) ячейки

Для каждой ячейки можно отдельно настроить распределение и выравнивание:

По левому краю

По центру

По правому краю

Растянуть

По базовой линии

Например, если ячейке 5 задать ширину 50% и распределение по центру, то она будет расположена посередине ячейки.

Настройка ячейки Вручную (Manual)

По умолчанию для ячейки выбрано положение Авто (Auto) . Эта опция указывает на то, что элемент будет автоматически занимать возможное доступное пространство после предыдущей ячейки.

Как изменить расположение ячейки в сетке

Если нужно поменять место ячейки в сетке, вы можете переставить ее в дереве html — передвинув ее в слоях или на холсте. Например, можно переставить ячейку 2 после ячейки 3 — их расположение в слоях изменится.

Этот способ не очень хороший, т.к. меняется структура документа.

Другой способ изменения позиционирования — настройка положения ячейки в гриде Вручную . Если изменить позицию ячейки с помощью этой настройки, то ее расположение в слоях не изменится.

Чтобы перейти в режим настройки Вручную , переключите соответствующую вкладку в настройках ячейки.

В этом режиме есть следующие параметры:

Column Start/End — начало и конец расположения ячейки по колонкам

Row Start/End — начало и конец расположения ячейки по строка

Чтобы разобраться, как работают эти параметры, рассмотрим понятие грид-линий.

Грид-линии

Все ячейки грида — это пересечение грид-линий. Существуют горизонтальные и вертикальные грид-линии, они располагаются по обе стороны колонки или строки.

Грид-линий всегда на одну больше, чем колонок или строк. В данном примере есть три колонки, сформированные четырьмя вертикальными грид-линиями, и две строки, сформированные тремя горизонтальными грид-линиями.

При настройке положения ячейки Вручную нужно указать:

от какой и до какой грид-линии ячейка располагается по колонкам — Column Start/End

от какой и до какой грид-линии ячейка располагается по строкам — Row Start/End

Пример 1. Для ячейки 2 зададим параметры: Column Start/End — 1 и 2, Row Start/End — 1 и 2.

Ячейка 2 переместится на место ячейки 1. Однако в слоях она всё так же будет идти после ячейки 1.

Пример 2. Расположим ячейку 9 после ячейки 2 на ширину двух колонок. Для этого ей нужно задать следующие параметры: Column Start/End — 2 и 4, Row Start/End — 1 и 2.

Пример 3. Зададим ячейкам 2 и 9 одинаковые параметры: Column Start/End — 1 и 2, Row Start/End — 1 и 2. Чтобы они не перекрывали друг друга, установим им обеим ширину 50%, а ячейке 9 — распределение по правому краю. Тогда обе эти ячейки будут располагаться в первой ячейке грида.

Преимущества ручного позиционирования в гриде по сравнению с абсолютным позиционированием элементов (position absolute):

Ручное позиционирование помогает быстрее и удобнее выстраивать любую сетку. При абсолютном позиционировании настройка положения элемента более сложная и менее удобная.

Ручное позиционирование помогает быстро делать адаптив. На любом экране сетка будет сохранять нужные пропорции. При абсолютном позиционировании сложно сохранить нужное расположение элементов на разной ширине экранов.