Основные понятия макета сетки

Сетка — это набор пересекающихся горизонтальных и вертикальных линий, определяющих столбцы и строки. Элементы могут размещаться на сетке внутри этих линий столбцов и строк. Макет CSS-сетки имеет следующие особенности:

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

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

Вы можете определить явную сетку с помощью макета сетки. Спецификация макета сетки достаточно гибкая, чтобы добавлять дополнительные строки и столбцы при необходимости. Включаются функции, такие как добавление «столько столбцов, сколько поместится в контейнер».

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

Более одного элемента можно разместить в ячейке или области сетки, и они могут частично перекрывать друг друга. Это наложение можно затем контролировать свойством z-index.

Сетка — это мощная спецификация, которая, в сочетании с другими частями CSS, такими как гибкая компоновка, может помочь вам создавать макеты, которые раньше было невозможно построить в CSS. Всё начинается с создания сетки в вашем контейнере сетки.

Мы создаём контейнер сетки, объявляя display: grid или display: inline-grid на элементе. Как только это сделано, все прямые дочерние элементы этого элемента становятся элементами сетки.

В этом примере у меня есть содержащий div с классом wrapper и внутри него пять дочерних элементов.

<div class="wrapper">
  <div>One</div>
  <div>Two</div>
  <div>Three</div>
  <div>Four</div>
  <div>Five</div>
</div>

Я делаю .wrapper контейнером сетки.

.wrapper {
  display: grid;
}

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

По мере изучения и работы с макетом CSS-сетки этот инструмент даст вам лучшее представление о том, что происходит с вашими сетками визуально.

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

Мы определяем строки и столбцы в нашей сетке с помощью свойств grid-template-rows и grid-template-columns. Эти свойства определяют дорожки сетки. Дорожка сетки — это пространство между любыми двумя смежными линиями на сетке. На изображении ниже показана выделенная дорожка — это дорожка первой строки в нашей сетке.

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

Я могу дополнить наш предыдущий пример, добавив свойство grid-template-columns, а затем определив размер дорожек столбцов.

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

<div class="wrapper">
  <div>One</div>
  <div>Two</div>
  <div>Three</div>
  <div>Four</div>
  <div>Five</div>
</div>

.wrapper {
  display: grid;
  grid-template-columns: 200px 200px 200px;
}

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

<div class="wrapper">
  <div>One</div>
  <div>Two</div>
  <div>Three</div>
  <div>Four</div>
  <div>Five</div>
</div>

.wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}

В этом следующем примере мы создаём определение с дорожкой 2fr, а затем двумя дорожками 1fr. Доступное пространство делится на четыре. Первой дорожке присваивается две части, а каждой из следующих двух дорожек по одной части.

<div class="wrapper">
  <div>One</div>
  <div>Two</div>
  <div>Three</div>
  <div>Four</div>
  <div>Five</div>
</div>

.wrapper {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
}

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

<div class="wrapper">
  <div>One</div>
  <div>Two</div>
  <div>Three</div>
  <div>Four</div>
  <div>Five</div>
</div>

.wrapper {
  display: grid;
  grid-template-columns: 500px 1fr 2fr;
}

Для больших сеток с множеством дорожек можно использовать обозначение repeat(), чтобы повторить весь или часть списка дорожек. Например, определение сетки:

.wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}

Можно также записать как:

.wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

Обозначение повторения можно использовать для части списка дорожек. В следующем примере я создал сетку с начальной дорожкой 20 пикселей, затем повторяющуюся секцию из 6 дорожек 1fr, а затем конечную дорожку 20 пикселей.

.wrapper {
  display: grid;
  grid-template-columns: 20px repeat(6, 1fr) 20px;
}

Обозначение повторения берёт список дорожек и использует его для создания повторяющегося шаблона дорожек. В следующем примере моя сетка будет состоять из 10 дорожек, дорожки 1fr, а затем дорожки 2fr. Этот шаблон будет повторяться пять раз.

.wrapper {
  display: grid;
  grid-template-columns: repeat(5, 1fr 2fr);
}

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

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

Вы также можете определить размер дорожек, созданных в неявной сетке, с помощью свойств grid-auto-rows и grid-auto-columns.

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

<div class="wrapper">
  <div>One</div>
  <div>Two</div>
  <div>Three</div>
  <div>Four</div>
  <div>Five</div>
</div>

.wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 200px;
}

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

У сетки есть решение для этого — функция minmax(). В этом следующем примере я использую minmax() в значении grid-auto-rows. Это означает, что автоматически созданные строки будут иметь минимальную высоту 100 пикселей и максимальную высоту auto. Использование auto означает, что размер будет ориентироваться на размер содержимого и будет растягиваться, чтобы обеспечить место для самого высокого элемента в ячейке в этой строке.

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

<div class="wrapper">
  <div>One</div>
  <div>
    Two
    <p>I have some more content in.</p>
    <p>This makes me taller than 100 pixels.</p>
  </div>
  <div>Three</div>
  <div>Four</div>
  <div>Five</div>
</div>

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

Линии нумеруются в соответствии с режимом написания документа. В языке слева направо линия 1 находится слева от сетки. В языке справа налево — справа от сетки. Линии также можно именовать, и мы рассмотрим, как это сделать, в будущих руководствах.

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

В приведенном ниже примере я размещаю первые два элемента в сетке с тремя столбцами, используя свойства grid-column-start, grid-column-end, grid-row-start и grid-row-end. Работая слева направо, первый элемент размещается на линии столбца 1 и простирается до линии столбца 4, которая в нашем случае является правой линией сетки. Он начинается на линии строки 1 и заканчивается на линии строки 3, поэтому охватывает две дорожки строк.

Второй элемент начинается на линии столбца 1 сетки и охватывает одну дорожку. Это значение по умолчанию, поэтому я не должен указывать конечную линию. Он также охватывает две дорожки строк от линии строки 3 до линии строки 5. Другие элементы разместятся в свободных местах на сетке.

<div class="wrapper">
  <div class="box1">One</div>
  <div class="box2">Two</div>
  <div class="box3">Three</div>
  <div class="box4">Four</div>
  <div class="box5">Five</div>
</div>

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

.box1 {
  grid-column-start: 1;
  grid-column-end: 4;
  grid-row-start: 1;
  grid-row-end: 3;
}

.box2 {
  grid-column-start: 1;
  grid-row-start: 3;
  grid-row-end: 5;
}

Значения с длинным форматом, использованные выше, можно сжать в одну строку для столбцов с помощью grid-column и в одну строку для строк с помощью grid-row. Следующий пример даст такое же позиционирование, как и в предыдущем коде, но с гораздо меньшим CSS. Значение перед символом косой черты (/) — это начальная линия, а значение после — конечная линия.

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

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

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

.box2 {
  grid-column: 1;
  grid-row: 3 / 5;
}

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

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

Отступы между ячейками сетки можно создать, используя свойства column-gap и row-gap, или сокращение gap. В приведенном ниже примере я создаю отступ в 10 пикселей между столбцами и отступ 1em между строками.

.wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: 10px;
  row-gap: 1em;
}

<div class="wrapper">
  <div>One</div>
  <div>Two</div>
  <div>Three</div>
  <div>Four</div>
  <div>Five</div>
</div>

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

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

Если я задам box1 значение display: grid, я могу задать для него определение дорожек, и он также станет сеткой. Элементы затем выкладываются в этой новой сетке.

.box1 {
  grid-column-start: 1;
  grid-column-end: 4;
  grid-row-start: 1;
  grid-row-end: 3;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

<div class="wrapper">
  <div class="box box1">
    <div class="nested">a</div>
    <div class="nested">b</div>
    <div class="nested">c</div>
  </div>
  <div class="box box2">Two</div>
  <div class="box box3">Three</div>
  <div class="box box4">Four</div>
  <div class="box box5">Five</div>
</div>

* {
  box-sizing: border-box;
}

.wrapper {
  border: 2px solid #f76707;
  border-radius: 5px;
  gap: 3px;
  background-color: #fff4e6;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.box {
  border: 2px solid #ffa94d;
  border-radius: 5px;
  background-color: #ffd8a8;
  padding: 1em;
  color: #d9480f;
}

.box1 {
  grid-column: 1 / 4;
}

.nested {
  border: 2px solid #ffec99;
  border-radius: 5px;
  background-color: #fff9db;
  padding: 1em;
}

В этом случае вложенная сетка не имеет отношения к родительской. Как вы можете видеть в примере, она не унаследовала отступ gap родителя, и линии вложенной сетки не выравниваются с линиями родительской сетки.

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

Для их использования мы редактируем приведенный выше пример вложенной сетки, чтобы изменить определение дорожек grid-template-columns: repeat(3, 1fr), на grid-template-columns: subgrid. Затем вложенная сетка использует дорожки родительской сетки для выкладки элементов.

.box1 {
  grid-column-start: 1;
  grid-column-end: 4;
  grid-row-start: 1;
  grid-row-end: 3;
  display: grid;
  grid-template-columns: subgrid;
}

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

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

<div class="wrapper">
  <div class="box box1">One</div>
  <div class="box box2">Two</div>
  <div class="box box3">Three</div>
  <div class="box box4">Four</div>
  <div class="box box5">Five</div>
</div>

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

.box1 {
  grid-column-start: 1;
  grid-column-end: 4;
  grid-row-start: 1;
  grid-row-end: 3;
}

.box2 {
  grid-column-start: 1;
  grid-row-start: 2;
  grid-row-end: 4;
}

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

Мы можем управлять порядком отображения элементов, используя свойство z-index — точно так же, как с позиционированными элементами. Если мы зададим элементу box2 меньшее значение z-index, чем у элемента box1, он будет отображаться под элементом box1 в стеке.

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

.box1 {
  grid-column-start: 1;
  grid-column-end: 4;
  grid-row-start: 1;
  grid-row-end: 3;
  z-index: 2;
}

.box2 {
  grid-column-start: 1;
  grid-row-start: 2;
  grid-row-end: 4;
  z-index: 1;
}

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