Подробное руководство по CSS Grid: свойства, примеры.
Концепция сетки и основные понятия
Сетка (grid) — набор пересекающихся горизонтальных и вертикальных линий, делящих пространство grid-контейнера на области сетки, в которые могут быть помещены элементы сетки.
Линии сетки (grid lines) — это невидимые горизонтальные и вертикальные разделительные линии, они существуют по обе стороны от строки и столбца. Существует ссылка по числовому индексу (свойства grid-column-start, grid-column-end,grid-row-start и grid-row-end) и по имени, заданному в CSS-коде.
Числовые индексы сетки зависят от стиля языка. Первым столбцом может являться как самый левый, так и самый правый столбец. Выделяют 2 группы линий сетки: первая группа определяет столбцы, которые проходят вдоль оси блока (ось столбцов), и вторая группа, определяющая строки, простирающиеся вдоль линейной оси (ось строк), в соответствии CSS3 режимом записи.
Дорожка сетки (grid track) — пространство между 2 соседними линиями сетки, используется для определения либо столбца, либо строки сетки. Дорожка идет от 1 края контейнера к другому, размер зависит от расположения линий сетки, которые ее определяют. Дорожки сетки аналогичны столбцам и строкам таблицы. По умолчанию смежные дорожки плотно прилегают друг к другу, задать расстояние между ними можно с помощью свойств row-gap, column-gap и gap.
Ячейка сетки (grid cell) — область, ограниченное четырьмя линиями сетки, аналогично ячейке таблицы. В ней можно разместить контент, а также это наименьшая единица сетки, на которую можно ссылаться при позиционировании элементов сетки. К ячейкам сетки нельзя обращаться напрямую с помощью CSS-свойств.
Область сетки (grid area) — прямоугольная область, ограниченная четырьмя линиями сетки и состоящая из одной или нескольких соседних ячеек. Область может быть такой же маленькой, как одна ячейка, или такой же большой, как все ячейки сетки. Область сетки может быть задана явно с помощью свойства grid-template-areas, по умолчанию на нее ссылаются ограничивающие линии сетки.
Элементы сетки (grid items) — отдельные элементы, которые назначаются области сетки . Каждый контейнер-сетка включает 0 и более элементов сетки; каждый дочерний элемент контейнера-сетки автоматически становится элементом сетки.
Не требуется, чтобы все области сетки были заполнены элементами. Возможно, что большинство ячеек сетки будут пустыми от любого содержимого. Также возможно, что элементы сетки будут перекрывать друг друга, либо определять перекрывающиеся области сетки.
Контейнер-сетка
Контейнер-сетка (grid container) — это блок, который устанавливает контекст форматирования по типу сетки. Создает область с сеткой, а дочерние элементы располагаются в соответствии с правилами компоновки сетки.
Когда вы определяете контейнер сетки с помощью display: grid или display: inline-grid, создаете новый контекст форматирования для содержимого этого контейнера, который влияет только на дочерние элементы сетки.
Существует 2 вида: обычный display: grid и встроенный display: inline-grid. Первый генерирует grid-контейнер уровня блока, второй — grid-контейнер уровня строки. Не являются блочными контейнерами, поэтому некоторые CSS-свойства не работают в контексте макета сетки:
float и clear игнорируются элементами сетки, но не самим контейнером-сеткой.
vertical-align не влияет на элементы сетки.
Псевдоэлементы ::first-line и ::first-letter не применяются к контейнеру-сетке и его потомкам.
Вычисляемое значение свойства display будет grid.Cетка по умолчанию имеет 1 столбец и строку, которые занимают полный размер контейнера. Чтобы разделить контейнер-сетку на столбцы или строки используются свойства grid-template-columns, grid-template-rows и grid-template-areas.
Если сетка больше из-за элементов сетки, размещенных вне явной сетки, то будут созданы неявные дорожки, размер этих неявных дорожек будет определяться свойствами grid-auto-rows и grid-auto-columns.
Свойства grid и grid-template — это сокращенные обозначения, которые можно использовать для одновременной установки всех свойств сетки grid-template-columns, grid-template-rows и grid-template-areas. grid сбрасывает свойства, управляющие неявной сеткой, а grid-template оставляет их без изменений.
Чтобы определить количество строк/столбцов имеется свойства grid-template-rows иgrid-template-columns. Свойства не наследуется.
Относительные, абсолютные единицы и процентные значения
Размеры дорожек сетки задаются с помощью положительных значений, используя относительные единицы длины — em, vh, vw; абсолютные единицы длины — px и проценты %. Размеры в % вычисляются от ширины или высоты контейнера-сетки.
.grid-container {
display: grid;
grid-template-rows: 5em 200px 200px;
grid-template-columns: 200px 5em 50%;
}
Гибкие размеры дорожек: единица измерения fr
fr — единица длины, которая позволяет создавать гибкие дорожки. Не является единицей измерения в обычном ее понимании, поэтому не может быть представлена или объединена с другими типами единиц в выражениях calc().
.grid-container {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr; /* grid-template-columns: 25% 25% 25% 25%; */
}
Минимальные и максимальные размеры дорожек
Если сумма всех гибких размеров дорожек меньше 1, то займут только долю оставшегося пространства. Если доступное пространство бесконечно (ширина/высота контейнера-сетки не заданы), дорожки сетки масштабируются по своему содержимому, при этом сохраняются их соответствующие пропорции.max-content присваивает для дорожки размер, занимающий максимальное пространство с учетом содержимого элемента сетки.
min-content устанавливает минимальное пространство, нужное для этого содержимого, ширина элемента ориентируется на самое длинное слово или на самое широкое изображение.
Функция minmax(min,max) — определяет диапазон размеров, больше или равный min и меньше или равный max. Если max < min, то max игнорируется, minmax(min,max) обрабатывается как min.
Автоматические размеры
auto ориентируется на содержимое элементов сетки одной дорожки. Как минимум, рассматривается как минимальный размер элемента сетки, как определено min-width или min-height. Обрабатывается так же, как и max-content.Растягивается за счет свойств align-content и justify-content.
.grid-container {
display: grid;
grid-template-rows: auto 1fr;
grid-template-columns: auto 1fr auto;
}
Соответствие содержимому
Размеры дорожек можно задавать с помощью значения fit-content(длина или %), представляющее собой формулу min(maximum size, max(minimum size, argument)), которая вычисляется как minmax(auto, max-content), то есть auto. При этом, размер дорожки ограничивается значением, указанным в скобках, и если оно больше, чем автоматический минимум.
.grid-container {
display: grid;
grid-template-columns: fit-content(50%) fit-content(300px) 1fr;
}
Повтор строк и столбцов
.grid-container {
display: grid;
grid-template-rows: repeat(3, 200px);
}
Первый аргумент задает количество повторений, которое задается с помощью положительного целого числа или ключевых слов. Второй аргумент - размер повторяющейся дорожки. Существуют некоторые ограничения:
Нотация repeat() не может быть вложенной.
Значения auto-fill или auto-fit не могут быть совмещены с min-content, max-content, auto, fit-content() или fr.Синтаксис repeat() имеет несколько форм:
/*повтор дорожки*/
repeat(количество повторений, имя дорожки? размер дорожки + имя дорожки?)
/*автозаполнение дорожек сетки*/
repeat(auto-fill или auto-fit, имя дорожки? фиксированный размер дорожки + имя дорожки?)
/*фиксированный повтор дорожки*/
repeat(количество повторений, имя дорожки? фиксированный размер дорожки + имя дорожки?)
Используя значение auto-fill, всегда получите хотя бы 1 столбец, даже если он не помещается в контейнер-сетку. Если вы используете auto-fit, то дорожки, которые не содержат элементы сетки, будут сброшены.
Элементы сетки
Особенности форматирования контейнер-сетки:
Для элементов сетки блокируется их значение свойства display. Значение display: inline-block вычисляется в display: block, анонимные блоки текста также занимают всю ширину контейнера и образуют разрыв строки.
Размер элемента сетки в пределах блока определяется его областью сетки.Расчеты элементов сетки для width: auto и height: auto зависят от их значений align-self:align-self: normal - не замещаемые элементы заполняют область сетки, а замещаемые элементы имеют свои размеры;
align-self: stretch; - категории элементов заполняют область сетки;
align-self: start/center- не замещаемые элементы устанавливают размеры в соответствии со своим содержимым, замещаемые элементы используют собственные размеры.
Соседние элементы сетки находятся в независимых областях сетки, то поля соседних элементов сетки margin не схлопываются.Браузеры по-разному обрабатывают процентные значения свойств margi и padding, поэтому не рекомендуется использовать их при задании значений этих свойств.
Поля margin: auto расширяются, поэтому могут использоваться для выравнивания элемента.Размещение и упорядочивание элементов сетки
Свойства дают возможность упорядочивать содержимое сетки так, что визуальное представление отличается от порядка элементов в html-документе.Размещение с помощью линий сетки
Элементы сетки связаны с областью сетки, которая определяет блок для элемента сетки. Положение элементов сетки определяется расположением линий сетки и диапазоном сетки - количеством занимаемых дорожек сетки. По умолчанию элемент сетки занимает 1 дорожку на каждой оси. Можно опустить значение grid-column-end или grid-row-end.
Свойства размещения на сетке - grid-row-start, grid-row-end, grid-column-start и grid-column-end и их краткая запись grid-row, grid-column и grid-area позволяют определить размещение элемента сетки, предоставив любую (или 0) из следующих 6 частей информации:
|
|
Строка | Столбец |
|---|---|---|
| Начало | Начальная линия строки | Начальная линия столбца |
| Конец | Конечная линия строки | Конечная линия столбца |
| Диапазон | Диапазон строк | Диапазон столбцов |
Размещение элементов сетки с помощью числовых индексов
.grid-container {
display: grid;
grid-template-rows: 200px 200px 200px;
grid-template-columns: 1fr 1fr 1fr;
}
.post-1 {
grid-row-start: 1; grid-row-end: 3;
grid-column-start: 1;
grid-column-end: 3;
}
.post-2 {
grid-row-start: 1;
grid-column-start: 3;
}
.post-3 {
grid-row-start: 2;
grid-column-start: 3;
}
.post-4 {
grid-row-start: 3;
grid-column-start: 3;
}
.post-5 {
grid-row-start: 3;
grid-column-start: 2;
}
.post-6 {
grid-row-start: 3;
grid-column-start: 1;
}Именованные линии сетки
Упрощает использование свойств размещения сетки. Линии явны в свойствах grid-template-rows и grid-template-columns или неявны путем создания именованных областей сетки в свойстве grid-template-areas.
Имя линии может быть любым, при указании в значении свойства оно заключается в квадратные скобки. Неприемлемо применять span в качестве имени линии.
.grid-container {
display: grid;
grid-template-rows: [start] 200px [row2] 200px [row3] 200px [row-end];
grid-template-columns: [start] 1fr [col2] 1fr [col3] 1fr [col-end];
}
.post-1 {
grid-row-start: span 2;
grid-column-start: span 2;
}
.post-2 {
grid-row-start: start;
grid-column-start: col3;
}
.post-3 {
grid-row-start: row2;
grid-column-start: col3;
}
.post-4 { grid-row-start: row3;
grid-column-start: col3;
}
.post-5 { grid-row-start: row3;
grid-column-start: col2;
}
.post-6 {
grid-row-start: row3;
grid-column-start: start;
}
Имена линий добавляются к неявным именам линий сетки, созданным свойством grid-template-areas, принимая вид name-start и name-end. Имена линий сетки никогда не заменяют другие имена линий сетки. Вместо этого они просто накапливаются.
Краткая запись свойств размещения элементов сетки
Свойства grid-row и grid-column являются сокращенными именами для свойств grid-row-start/grid-row-end и grid-column-start/grid-column-end соответственно.
Если заданы 2 значения, где 1 (до косой черты) устанавливается для параметра grid-row-start/grid-column-start, 2 - для grid-row-end/grid-column-end. В случае если второе значение опущено, а первое указано в формате пользовательского идентификатора, то grid-row-end/grid-column-end, также устанавливается в пользовательское имя сетки. В противном случае, оно рассчитывается в auto.
Для свойства grid-area, если указано 4е значения, первое устанавливается для grid-row-start, второе - для grid-column-start, третье - для grid-row-end, четвертое - для grid-column-end.
Если grid-column-end/grid-row-end не указан, а grid-column-start/grid-row-start указан в форме пользовательского имени, то для grid-column-end/grid-row-end также устанавливается значение пользовательского имени линии; в противном случае он установлен на auto.
Когда grid-column-start опущен, а значение grid-row-start указан в форме пользовательского имени, оно устанавливается для всех 4 значений. Иначе изменяется на auto.
grid-row: a;
grid-row: auto;
grid-column: 2;
grid-row: 1 / -1;
grid-column: sidebar-start / footer-end;grid-area: a;
grid-area: auto;
grid-area: 2 / 4;
grid-area: 1 / 3 / -1;
grid-area: header-start / sidebar-start / footer-end / sidebar-start;
Повторное упорядочивание элементов сетки
Свойство order также применяется к элементам сетки. Влияет на автоматическое размещение и порядок отрисовки. Свойство используется только для визуального переупорядочения контента.
Выравнивание элементов сетки и промежутки между элементами
Для выравнивания элементов сетки можно использовать свойство margin, аналогично, как работает это свойство для блочных элементов.
По умолчанию элементы сетки растягиваются, чтобы заполнить свою область сетки. Тем не менее, если justify-self или align-self вычисляют значение, отличное от stretch или задано margin: auto, элементы сетки будут автоматически изменяться в соответствии с их содержимым.
Выравнивание с помощью margin: auto
При расчете размеров дорожек сетки margin: auto обрабатываются как 0. Они поглощают положительное свободное пространство, предшествующее выравниванием с помощью свойств выравнивания. Переполняющиеся элементы игнорируют свои автоматические поля и переполнение, как указано в их свойствах выравнивания блоков.
Выравнивание по оси строки
Элементы сетки выравниваются в направлении оси строки с помощью свойства justify-self или свойства justify-items.
Выравнивание по оси столбца.
Элементы сетки выравниваются в направлении, перпендикулярном оси строки с помощью свойства align-self или свойства align-item, заданного для контейнера-сетки.
Промежутки между элементами сетки
Свойства row-gap и column-gap, если указаны в контейнере сетки, определяют промежутки между строками, столбцами сетки. Для определении размера дорожки любой промежуток рассматривается как дополнительная пустая дорожка указанного размера. Дополнительный промежуток добавляется между дорожками за счет свойств justify-content и align-content.
Промежутки добавляются только между 2 дорожками сетки, то есть они не добавляются перед первой и после последней дорожки.
row-gap: 1.5em;
column-gap: 10px;
gap: 1%;