Grid-лейаут

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Параметры:

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

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

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

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

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

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

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

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

Параметры:

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

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

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

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

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

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

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

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

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

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

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

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

Грид-линии

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

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

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

Пример 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):