Подсетка

При добавлении display: grid к контейнеру сетки только прямые дочерние элементы становятся элементами сетки и могут быть размещены на созданной вами сетке. Дочерние элементы этих элементов отображаются в обычном потоке.

Вы можете «вкладывать» сетки, сделав элемент сетки контейнером сетки. Однако эти сетки независимы от родительской сетки и друг от друга, то есть они не берут размерность следов от родительской сетки. Это затрудняет выравнивание вложенных элементов сетки с основной сеткой.

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

Например, если вы используете grid-template-columns: subgrid и вложенная сетка охватывает три столбца следов родительской, у вложенной сетки будет три столбца следов такого же размера, как у родительской сетки. Отступы наследуются, но также могут быть переопределены с помощью другого значения gap. Имена строк могут передаваться из родителя в подсетку, и подсетка также может объявлять свои собственные имена строк.

В примере ниже у меня есть макет сетки с девятью 1fr столбцовыми следами и четырьмя строками, которые имеют минимальную высоту 100px.

Я размещаю .item от столбцовых линий 2 до 7 и строк 2 до 4. Затем я преобразую этот элемент сетки в сетку, задавая для него столбцовые следы как подсетку и определяю строки как обычные. Поскольку элемент охватывает пять столбцовых следов, это означает, что подсетка имеет пять столбцовых следов. Затем я могу разместить .subitem на этой сетке.

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

<div class="grid">
  <div class="item">
    <div class="subitem"></div>
  </div>
</div>

.grid {
  display: grid;
  grid-template-columns: repeat(9, 1fr);
  grid-template-rows: repeat(4, minmax(100px, auto));
}

.item {
  display: grid;
  grid-column: 2 / 7;
  grid-row: 2 / 4;
  grid-template-columns: subgrid;
  grid-template-rows: repeat(3, 80px);
}

.subitem {
  grid-column: 3 / 6;
  grid-row: 1 / 3;
}

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

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

<div class="grid">
  <div class="item">
    <div class="subitem"></div>
  </div>
</div>

.grid {
  display: grid;
  grid-template-columns: repeat(9, 1fr);
  grid-template-rows: repeat(4, minmax(100px, auto));
}

.item {
  display: grid;
  grid-column: 2 / 7;
  grid-row: 2 / 4;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: subgrid;
}

.subitem {
  grid-column: 2 / 4;
  grid-row: 1 / 3;
}

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

<div class="grid">
  <div class="item">
    <div class="subitem"></div>
  </div>
</div>

.grid {
  display: grid;
  grid-template-columns: repeat(9, 1fr);
  grid-template-rows: repeat(4, minmax(100px, auto));
}

.item {
  display: grid;
  grid-column: 2 / 7;
  grid-row: 2 / 4;
  grid-template-columns: subgrid;
  grid-template-rows: subgrid;
}

.subitem {
  grid-column: 3 / 6;
  grid-row: 1 / 3;
}

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

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

<div class="grid">
  <div class="item">
    <div class="subitem">1</div>
    <div class="subitem">2</div>
    <div class="subitem">3</div>
    <div class="subitem">4</div>
    <div class="subitem">5</div>
    <div class="subitem">6</div>
    <div class="subitem">7</div>
    <div class="subitem">8</div>
    <div class="subitem">9</div>
    <div class="subitem">10</div>
    <div class="subitem">11</div>
    <div class="subitem">12</div>
  </div>
</div>

.grid {
  display: grid;
  grid-template-columns: repeat(9, 1fr);
  grid-template-rows: repeat(4, minmax(100px, auto));
}

.item {
  display: grid;
  grid-column: 2 / 7;
  grid-row: 2 / 4;
  grid-template-columns: subgrid;
  grid-template-rows: subgrid;
}

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

<div class="grid">
  <div class="item">
    <div class="subitem">1</div>
    <div class="subitem">2</div>
    <div class="subitem">3</div>
    <div class="subitem">4</div>
    <div class="subitem">5</div>
    <div class="subitem">6</div>
    <div class="subitem">7</div>
    <div class="subitem">8</div>
    <div class="subitem">9</div>
    <div class="subitem">10</div>
    <div class="subitem">11</div>
    <div class="subitem">12</div>
  </div>
</div>

.grid {
  display: grid;
  grid-template-columns: repeat(9, 1fr);
  grid-template-rows: repeat(4, minmax(100px, auto));
}

.item {
  display: grid;
  grid-column: 2 / 7;
  grid-row: 2 / 4;
  grid-template-columns: subgrid;
  grid-auto-rows: minmax(100px, auto);
}

Если у вас заданы gap, column-gap или row-gap в родительском элементе, эти значения будут переданы в подсетку, поэтому у неё будут такие же отступы между следами, как у родителя. Однако в некоторых ситуациях вам может потребоваться, чтобы отступы между следами подсетки были другими или их вообще не было. Это можно сделать, используя свойства gap-* в контейнере сетки подсетки.

Вы можете увидеть это в примере ниже. Родительская сетка имеет отступ 20px для строк и столбцов. У подсетки установлено row-gap в значение 0.

<div class="grid">
  <div class="item">
    <div class="subitem"></div>
    <div class="subitem2"></div>
  </div>
</div>

.grid {
  display: grid;
  grid-template-columns: repeat(9, 1fr);
  grid-template-rows: repeat(4, minmax(100px, auto));
  gap: 20px;
}

.item {
  display: grid;
  grid-column: 2 / 7;
  grid-row: 2 / 4;
  grid-template-columns: subgrid;
  grid-template-rows: subgrid;
  row-gap: 0;
}

.subitem {
  grid-column: 3 / 6;
  grid-row: 1 / 3;
}

.subitem2 {
  background-color: rgb(0 0 0 / 0.5);
  grid-column: 2;
  grid-row: 1;
}

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

При использовании CSS-сеток вы можете присваивать имена линиям сетки и затем позиционировать элементы на основе этих имён, а не на основе номера линии. Имена линий родительской сетки передаются в подсетку, и вы можете использовать их для размещения элементов. В примере ниже я присвоил имена линиям родительской сетки col-start и col-end и затем использовал их для размещения подэлемента.

<div class="grid">
  <div class="item">
    <div class="subitem"></div>
  </div>
</div>

.grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr [col-start] 1fr 1fr 1fr [col-end] 1fr 1fr 1fr;
  grid-template-rows: repeat(4, minmax(100px, auto));
  gap: 20px;
}

.item {
  display: grid;
  grid-column: 2 / 7;
  grid-row: 2 / 4;
  grid-template-columns: subgrid;
  grid-template-rows: subgrid;
}

.subitem {
  grid-column: col-start / col-end;
  grid-row: 1 / 3;
}

Вы также можете задавать имена линий в подсетке. Это достигается добавлением списка имён линий в квадратных скобках после ключевого слова subgrid. Если у вас четыре линии в подсетке, чтобы назвать их все, вы можете использовать синтаксис grid-template-columns: subgrid [line1] [line2] [line3] [line4]

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

<div class="grid">
  <div class="item">
    <div class="subitem"></div>
    <div class="subitem2"></div>
  </div>
</div>

.grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr [col-start] 1fr 1fr 1fr [col-end] 1fr 1fr 1fr;
  grid-template-rows: repeat(4, minmax(100px, auto));
  gap: 20px;
}

.item {
  display: grid;
  grid-column: 2 / 7;
  grid-row: 2 / 4;
  grid-template-columns: subgrid [sub-a] [sub-b] [sub-c] [sub-d] [sub-e] [sub-f];
  grid-template-rows: subgrid;
}

.subitem {
  grid-column: col-start / col-end;
  grid-row: 1 / 3;
}

.subitem2 {
  background-color: rgb(0 0 0 / 0.5);
  grid-column: sub-b / sub-d;
  grid-row: 1;
}

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

Поскольку значение подсетки действует аналогично обычной вложенной сетке, легко переключаться между ними. Например, если вы понимаете, что вам нужна неявная сетка для строк, вам нужно будет удалить значение subgrid от grid-template-rows и, возможно, задать значение для grid-auto-rows, чтобы управлять неявным размером дорожки.

• Видео: Размещение форм с помощью подсеток и Не ждите, чтобы использовать подсетку для улучшения макетов карточек
• Привет, подсетка! Презентация с CSSConf.eu