3. Определение сетки

Сетка по умолчанию имеет один столбец и одну строку, которые занимают полный размер контейнера. Для разделения контейнера-сетки на столбцы и строки используются свойства 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; /* 3 строки */
  grid-template-columns: 200px 5em 50%; /* 3 столбца */
}

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

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

Синтаксис

.grid-container {
  display: grid;  
  grid-template-columns: 1fr 1fr 1fr 1fr; /* эквивалентно grid-template-columns: 25% 25% 25% 25%; */
}
.grid-container {
  display: grid;  
  grid-template-columns: 1fr 2fr 1fr; /* эквивалентно grid-template-columns: 25% 50% 25%; */
}

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

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

Ключевое слово max-content устанавливает для дорожки размер, который занимает максимально необходимое пространство с учетом содержимого элемента сетки.

min-content позволяет занимать минимальное пространство, необходимое для этого содержимого, при этом ширина элемента ориентируется на самое длинное слово или на самое широкое изображение.

Функция minmax(min,max) определяет диапазон размеров, больше или равный min и меньше или равный max.
Если max < min, то max игнорируется, а minmax(min,max) обрабатывается как min.
Значения в **fr можно устанавливать только как максимальное**.

Варианты

minmax(длина или min-content или max-content или auto, длина или fr или min-content или max-content или auto)
minmax(длина, длина или fr или min-content или max-content или auto)
minmax(длина или min-content или max-content или auto, длина)

Синтаксис

.grid-container {
  display: grid; 
  grid-template-rows: 200px minmax(100px, 1fr);
}

Значение 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;
}

Нотация repeat() представляет повторяющийся фрагмент списка дорожек, что позволяет записать в более компактной форме большое количество одинаковых по размерам столбцов или строк. Общая форма синтаксиса следующая:

repeat(число или auto-fill или auto-fit, повторяющаяся дорожка)

Синтаксис

.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, вы всегда получите хотя бы один столбец, даже если он по какой-то причине не помещается в контейнер-сетку. Если вы используете auto-fit, то дорожки, которые не содержат элементы сетки, будут сброшены.

Свойство grid-template-areas определяет именованные области сетки, которые не связаны с каким-либо конкретным элементом сетки, но на которые можно ссылаться из свойств размещения сетки. Синтаксис свойства обеспечивает визуализацию структуры сетки, облегчая понимание общего макета контейнера-сетки.

Свойство не наследуется.

Синтаксис

.grid-container {
  display: grid;  
  grid-template-areas: "header header"  
                       "sidebar content"  
                       "sidebar content";
  grid-template-columns: 150px 1fr;  
  grid-template-rows: 50px 1fr 50px; 
}
header { 
  grid-area: header;
}  
aside { 
  grid-area: sidebar; 
}  
main { 
  grid-area: content; 
}

Каждый идентификатор сетки в значении grid-template-areas соответствует ячейке сетки. Как только все ячейки идентифицированы, браузер объединяет все смежные ячейки с одинаковыми именами в одну область, которая охватывает все их, при условии, что они описывают область прямоугольной формы. Если вы попытаетесь настроить более сложные области, весь шаблон будет недействительным и области сетки не будут определены.

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

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

После того, как вы создали области сетки, элементы сетки могут быть назначены непосредственно, чтобы занимать эти области, используя свойство grid-area.

Размещение элементов сетки с помощью именованных областей:

.grid-container {
  display: grid;
  grid-template-areas: "post-1 post-1 post-2"  
                       "post-1 post-1 post-3"  
                       "post-6 post-5 post-4"; 
  grid-template-rows: repeat(3, 200px);
  grid-template-columns: repeat(3, 1fr);
}
.post-1 {
  grid-area: post-1;
}
.post-2 {           
  grid-area: post-2;
}
.post-3 {
  grid-area: post-3;
}
.post-4 {           
  grid-area: post-4;
}
.post-5 {
  grid-area: post-5;
}
.post-6 {           
  grid-area: post-6;
}

Свойство grid-template является сокращением для установки свойств grid-template-rows, grid-template-columns и grid-template-areas в одном объявлении.

Свойство не наследуется.

Пример вариантов:

.grid-container {
  display: grid;
  grid-template: repeat(3, 200px)/repeat(3, 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-row-end: 2; 
  grid-column-start: 3;   
  grid-column-end: 4; 
}
...
.grid-container {
  display: grid;
  grid-template: [start] "post-1 post-1 post-2" 200px [row2] 
                  [row2] "post-1 post-1 post-3"  200px [row3]
                  [row3] "post-6 post-5 post-4" 200px [row-end] / 1fr 1fr 1fr;
}
.post-1 { 
  grid-area: post-1;  
}
.post-2 { 
  grid-area: post-2;  
}
...

Функция repeat() не разрешена для определения списка дорожек в этом свойстве, если используются именованные области сетки (сетка просто не будет отрисована).

Если элемент сетки расположен в строке или столбце, размер которых не определен явно через grid-template-rows или grid-template-columns, создаются неявные дорожки сетки для его хранения. Это может произойти в случае, если строка или столбец оказались за пределами установленных размеров сетки.

По умолчанию эти автоматически добавляемые дорожки имеют минимальный необходимый размер. Свойства grid-auto-rows и grid-auto-columns позволяют контролировать размер неявных дорожек сетки. Если дано несколько размеров дорожек, шаблон повторяется по мере необходимости, чтобы найти размер неявных дорожек. Первая неявная дорожка сетки после явной сетки получает первый заданный размер и так далее.

Свойства не наследуются.

grid-auto-columns, **grid-auto-rows ** | Значения: | | |auto |Значение по умолчанию. | |размер дорожки + |В качестве размера дорожки может использоваться любое значение, допустимое для задания размеров дорожек сетки.|

.grid-container {
  max-width: 710px;
  display: grid;  
  grid-template-columns: repeat(3,1fr); 
  grid-template-rows: repeat(3,100px); 
  grid-auto-rows: 50px;
}
.post-1 {
  grid-column: 1/3; 
  grid-row: 1/3;
}
.post-2 {
  grid-column: 3; 
  grid-row: 1;
}
.post-3 {
  grid-column: 3; 
  grid-row: 2;
}
.post-4 {
  grid-column: 3; 
  grid-row: 3;
}
.post-5 {
  grid-column: 2; 
  grid-row: 3;
}
.post-6 {
  grid-column: 1; 
  grid-row: 3;
}

`

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

Свойство grid-auto-flow управляет автоматическим размещением элементов сетки без явного положения. После заполнения явной сетки (или если явной сетки нет) автоматическое размещение также приведет к генерации неявных дорожек сетки.

Свойство не наследуется.

grid-auto-flow:

Значения: |row |Алгоритм автоматического размещения размещает элементы, заполняя каждую строку по очереди слева-направо (для LTR-языков), добавляя новые строки по мере необходимости. Значение по умолчанию.| |column |Алгоритм размещает элементы, заполняя каждый столбец по очереди сверху-вниз, добавляя новые столбцы по мере необходимости.| |dense |Алгоритм «плотной» укладки элементов. При необходимости может менять порядок следования элементов, заполняя пустые места более крупными элементами. Свойство будет полезным при создании компактных галерей, если для изображений не задан порядок, в котором они должны быть расположены. Для каждого элемента сетки браузер сканирует всю сетку в заданном направлении потока (строка или столбец), начиная от начальной точки потока (верхний левый угол, на языках LTR - слева направо), пока не найдет место, куда поместится этот элемент сетки.|

Галерея изображений в стиле Masonry с помощью автоматического размещения элементов сетки:

.grid-container {
  max-width: 710px;
  margin: 10px auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 10px;
  grid-auto-rows: 200px;
  grid-auto-flow: dense;
}
.item5 {
  grid-column: span 2;
  grid-row: span 2;
}
.item6 {
  grid-column: span 3;
  grid-row: span 2;
}

Свойство grid задает все явные grid-template-rows, grid-template-columns и grid-template-areas и все неявные свойства сетки grid-auto-flow, grid-auto-rows и grid-auto-columns в одном объявлении. Оно не сбрасывает свойства row-gap/column-gap. Его синтаксис соответствует grid-template, а также дополнительной синтаксической форме для определения автоматического размещения элементов сетки:

Путем явного задания дорожек на одной оси (устанавливая grid-template-rows или grid-template-columns и задавая другим значение none), и задавая, как автоматически повторять дорожки на другой оси (устанавливая grid-auto-rows или grid-auto-columns и задавая другим auto).

Для grid-auto-flow также устанавливается одно из трех допустимых значений. Все остальные подсвойства grid сбрасываются к своим начальным значениям.

Варианты

/* значения для grid-template */
grid: none;
grid: "a" 100px "b" 1fr;
grid: [linename1] "a" 100px [linename2];
grid: "a" 200px "b" min-content;
grid: "a" minmax(100px, max-content) "b" 20%;
grid: 100px / 200px;
grid: minmax(400px, min-content) / repeat(auto-fill, 50px);
 
/* значения для grid-template-rows / [auto-flow && dense? ] grid-auto-columns? */
grid: 200px / auto-flow;
grid: 30% / auto-flow dense;
grid: repeat(3, [line1 line2 line3] 200px) / auto-flow 300px;
grid: [line1] minmax(20em, max-content) / auto-flow dense 40%;
 
/* значения для [ auto-flow && dense? ] grid-auto-rows? / grid-template-columns */
grid: auto-flow / 200px;
grid: auto-flow dense / 30%;
grid: auto-flow 300px / repeat(3, [line1 line2 line3] 200px);
grid: auto-flow dense 40% / [line1] minmax(20em, max-content);

Продолжение

Оглавление