CSS Grid Layout - самая мощная система компоновки из доступных на данный момент в CSS. Это двумерная система, которая может обрабатывать как колонки так и строки, в отличии от Flexbox, который в значительной степени является одномерной системой. При работе с CSS Grid, вы применяете CSS правила и родительским элементам (которые становятся Grid контейнерами) и к дочерним элементам (которые становятся Grid элементами).

CSS Grid Layout (aka "Grid") - это двумерная система компоновки основанная на сетке, цель которой заключается в том чтобы полностью изменить способ проектирования пользовательских интерфейсов основанных на сетке. CSS всегда использовался для разметки веб-страниц, но никогда не делал эту работу хорошо. Сначала мы использовали таблицы, потом обтекания (floats), позиционирование и инлайновые блоки (inline-block), но все эти методы по существу являются просто хаками и опускают много важных функциональных возможностей (например, вертикальное выравнивание). Flexbox помог, но он предназначен для более простых одномерных макетов, а не для сложных двумерных (на самом деле Flexbox и Grid очень хорошо работают вместе). CSS Grid'ы - это первый модуль созданный специально для решения проблем компоновки, которые до сих пор мы решали с помощью хаков при создании сайтов.

Перед тем как мы погрузимся в концепцию Grid'ов, важно понимать её терминологию. Так как используемые здесь термины концептуально похожи, их довольно легко перепутать друг с другом, если с самого начала не запомнить их значения, определённые в спецификации.

Контейнер сетки

Элемент к которому применяется display: grid. Это прямой родитель для всех элементов сетки. В этом примере container является контейнером.

<div class="container">
  <div class="item item-1"></div>
  <div class="item item-2"></div>
  <div class="item item-3"></div>
</div>

Элемент сетки

Дочерние элементы (прямые потомки) контейнера. Здесь item это элемент сетки, но не sub-item.

<div class="container">
  <div class="item"></div> 
  <div class="item">
    <p class="sub-item"></p>
  </div>
  <div class="item"></div>
</div>

Линия сетки

Разделительные линии, составляющие структуру для сетки. Они могут быть вертикальными ("линии колонок") или горизонтальными ("линии строк") и располагаться по обе стороны от строки или столбца.

Трек сетки

Пространство между двумя соседними линиями. Вы можете думать об этом как о столбцах или строках сетки.

Ячейка сетки

Пространство между линиями двух соседних строк и двух соседних столбцов. Это отдельная "единица измерения" сетки.

Область сетки

Общее пространство окружённое четырьмя линиями. Область может состоять из любого количества ячеек.

Свойства для контейнера:

  • display
  • grid-template-columns
  • grid-template-rows
  • grid-template-areas
  • grid-template
  • grid-column-gap
  • grid-row-gap
  • grid-gap
  • justify-items
  • align-items
  • justify-content
  • align-content
  • grid-auto-columns
  • grid-auto-rows
  • grid-auto-flow
  • grid

Свойства для элементов:

  • grid-column-start
  • grid-column-end
  • grid-row-start
  • grid-row-end
  • grid-column
  • grid-row
  • grid-area
  • justify-self
  • align-self

Свойства для родительского элемента (Контейнера сетки)

- display

Определяет элемент как контейнер и устанавливает новый контекст форматирования сетки для его содержимого.

  • grid - формирует сетку как блок;
  • inline-grid - формирует сетку как инлайновый блок;
  • subgrid - если ваш контейнер это ещё и элемент (вложенная сетка), то вы можете использовать это свойство для обозначения того, чтобы размеры строк/колонок были взяты из родительского элемента, а не определяли собственный;
.container {
  display: grid | inline-grid | subgrid;
}

- grid-template-columns / grid-template-rows

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

  • <track-size> - может быть фиксированным размером, процентами или частью свободного пространства в сетке (определяется с помощью единицы fr (fraction));
  • <line-name> - произвольное имя на ваш выбор;
.container {
  grid-template-columns: <track-size> ... | <line-name> <track-size> ...;
  grid-template-rows: <track-size> ... | <line-name> <track-size> ...;
}

- grid-template-areas

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

  • <grid-area-name> - имя области заданное с помощью grid-area;
  • . - точка обозначающая пустую ячейку;
  • none - области не определены;
.container {
  grid-template-areas: 
    "<grid-area-name> | . | none | ..."
    "...";
}

- grid-template

Сокращение для grid-template-rows, grid-template-columns, и grid-template-areas.

  • none - устанавливает все три свойства в их начальное значение;
  • subgrid - устанавливает grid-template-rows и grid-template-columns в subgrid, и grid-template-areas в его начальное значение;
  • <grid-template-rows> / <grid-template-columns> - устанавливает grid-template-columns и grid-template-rows в определённое значение, соответственно, и устанавливает grid-template-areas в none;
.container {
  grid-template: none | subgrid | <grid-template-rows> / <grid-template-columns>;
}

- grid-column-gap / grid-row-gap

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

  • <line-size> - значение размера;
.container {
  grid-column-gap: <line-size>;
  grid-row-gap: <line-size>;
}

- grid-gap

Сокращение для grid-row-gap и grid-column-gap.

.container {
  grid-gap: <grid-row-gap> <grid-column-gap>;
}

- justify-items

Выравнивает содержимое вдоль оси строки (в отличии от align-items который выравнивает элементы вдоль оси столбца). Это значение применяется ко всем элементам сетки внутри контейнера.

  • start - выравнивает содержимое по левой стороне области;
  • end - выравнивает содержимое по правой стороне области;
  • center - выравнивает содержимое по центру области;
  • stretch - заполняет всю ширину области (по умолчанию);
.container {
  justify-items: start | end | center | stretch;
}

- align-items

Выравнивает содержимое вдоль оси столбца (в отличии от justify-items который выравнивает элементы вдоль оси строки). Это значение применяется ко всем элементам сетки внутри контейнера.

  • start - выравнивание элементов по верхней части области;
  • end - выравнивание элементов по нижней части области;
  • center - выравнивание элементов по центру области;
  • stretch - заполняет всю высоту области (по умолчанию);
.container {
  align-items: start | end | center | stretch;
}

- justify-content

Иногда общий размер сетки может быть меньше размера контейнера. Такое может случится если у всех элементов сетки заданы фиксированные единицы измерения, например px. В таком случае можно установить выравнивание сетки внутри контейнера. Это свойство выравнивает сетку вдоль оси строки (в отличии от свойства align-content, которое выравнивает сетку вдоль оси столбца).

  • start - выравнивает сетку по левой стороне контейнера;
  • end - выравнивает сетку по правой стороне контейнера;
  • center - выравнивает сетку по центру контейнера;
  • stretch - масштабирует элементы чтобы сетка могла заполнить всю ширину контейнера;
  • space-around - одинаковое пространство между элементами, и полуразмерные отступы по краям;
  • space-between - одинаковое пространство между элементами, без отступов по краям;
  • space-evenly - одинаковое пространство между элементами, и полноразмерные отступы по краям;
.container {
  justify-content: start | end | center | stretch | space-around | space-between | space-evenly;    
}

- align-content

Иногда общий размер сетки может быть меньше размера контейнера. Такое может случится если у всех элементов сетки зада фиксированные единицы измерения, например px. В таком случае можно установить выравнивание сетки внутри контейнера. Это свойство выравнивает сетку вдоль оси колонки (в отличии от свойства justify-content, которое выравнивает сетку вдоль оси строки).

  • start - выравнивает сетку по верхней части контейнера;
  • end - выравнивает сетку по нижней части контейнера;
  • center - выравнивает сетку по центру контейнера;
  • stretch - масштабирует элементы чтобы сетка могла заполнить всю высоту контейнера;
  • space-around - одинаковое пространство между элементами, и полуразмерные отступы по краям;
  • space-between - одинаковое пространство между элементами, без отступов по краям;
  • space-evenly - одинаковое пространство между элементами, и полноразмерные отступы по краям;
.container {
  align-content: start | end | center | stretch | space-around | space-between | space-evenly;  
}

- grid-auto-columns / grid-auto-rows

Определяет размер любых автоматически созданных треков (иначе говоря, неявных треков). Неявные треки создаются при явном позиционировании столбцов и строк (через grid-template-rows / grid-template-columns), которые находятся за пределами заданной сетки.

  • <track-size> - может быть фиксированным размером, процентами, или частью свободного пространства в сетке (с использованием единицы fr);
.container {
  grid-auto-columns: <track-size> ...;
  grid-auto-rows: <track-size> ...;
}

- grid-auto-flow

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

  • row - говорит алгоритму авто-размещения заполнять каждую строку поочерёдно, добавляя новые строки при необходимости;
  • column - говорит алгоритму авто-размещения заполнять каждую колонку поочерёдно, добавляя новые колонки при необходимости;
  • dense - говорит алгоритму авто-размещения попытаться заполнить дыры в сетке, если более мелкие элементы появляются позже;
.container {
  grid-auto-flow: row | column | row dense | column dense
}

- grid

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

.container {
    grid: none | <grid-template-rows> / <grid-template-columns> | <grid-auto-flow> [<grid-auto-rows> [/ <grid-auto-columns>]];
}

Свойства для дочерних элементов (Grid элементы)

- grid-column-start / grid-column-end / grid-row-start / grid-row-end

Определяют местоположение в сетке ссылаясь на конкретные линии. grid-column-start/grid-row-start - это линия с которой начинается элемент, а grid-column-end/grid-row-end - это линия на которой элемент заканчивается.

  • <line> - может быть числом ссылающимся на пронумерованную линию, или названием ссылающимся на именованую линию;
  • span <number> - элемент, который будет охватывать предоставленное количество треков;
  • span <name> - элемент будет будет охватывать пока не достигнет линии с указанным названием;
  • auto - указывает автоматическое размещения, автоматическое охват, или охват по умолчанию;
.item {
  grid-column-start: <number> | <name> | span <number> | span <name> | auto
  grid-column-end: <number> | <name> | span <number> | span <name> | auto
  grid-row-start: <number> | <name> | span <number> | span <name> | auto
  grid-row-end: <number> | <name> | span <number> | span <name> | auto
}

- grid-column / grid-row

Сокращение для grid-column-start + grid-column-end, и grid-row-start + grid-row-end, соответственно.

  • <start-line> / <end-line> - каждый из них принимает тоже самое, что и в длинной версии, включая охват;
.item {
  grid-column: <start-line> / <end-line> | <start-line> / span <value>;
  grid-row: <start-line> / <end-line> | <start-line> / span <value>;
}

- grid-area

Даёт название элементу чтобы можно было ссылаться на него с помощью шаблона созданного через grid-template-areas свойство. В качестве альтернативы, это свойство может быть использовано в качестве сокращения для grid-row-start + grid-column-start + grid-row-end + grid-column-end.

  • <name> - название, которое вы выберите;
  • <row-start> / <column-start> / <row-end> / <column-end> - может быть нумерацией или названиями линий;
.item {
  grid-area: <name> | <row-start> / <column-start> / <row-end> / <column-end>;
}

- justify-self

Выравнивает содержимое элемента вдоль оси строки (в отличии от align-self, который выравнивает вдоль оси столбца). Это значение применяется к содержимому внутри отдельного элемента.

  • start - выравнивает содержимое по левой части области;
  • end - выравнивает содержимое по правой части области;
  • center -выравнивает содержимое по центру области;
  • stretch - заполняет всю ширину области (по умолчанию);
.item {
  justify-self: start | end | center | stretch;
}

- align-self

Выравнивает содержимое элемента вдоль оси столбца (в отличии от justify-self, который выравнивает вдоль оси строки). Это значение применяется к содержимому внутри отдельного элемента.

  • start - выравнивает содержимое по верхней части области;
  • end - выравнивает содержимое по нижней части области;
  • center -выравнивает содержимое по центру области;
  • stretch - заполняет всю высоту области (по умолчанию);
.item {
  align-self: start | end | center | stretch;
}