Использование display:grid для резиновой верстки

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

К примеру так:

grid-template: repeat(3, 200px)/ repeat(3, 1fr);

В данном случае, мы задаем размеры столбцов и строк, след. образом: 3 строки высотой в 200px / 3 столбца шириной в 1/3 свободного пространства на грид-сетке.

Так же, по желанию мы можем установить внешние отступы между каждой ячейкой таблицы, с помощью свойств:

  • grid-gap (устанавливает одинаковый отступ и между строками и между столбцами)
  • grid-row-gap (устанавливает отступ между строками)
  • grid-column-gap (устанавливает отступ между столбцами

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

grid-column-start: 2;
grid-column-end: 4;

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

grid-column-start: 2; //начиная со второго столбца
grid-column-end: span 2; //ширина 2 клетки

Таким образом, блок, начиная со второго столбца будет занимать 2 ячейки.
Аналогичный синтаксис у grid-row-start и у grid-row-end, эти два свойства нам позволят растянуть блок на несколько строк)

Эти две пары свойств можно объединить в одну.
grid-row, grid-column;

Синтаксис следующий:
grid-column: 2/4; //В данном случае результат будет такой же, как и в примере выше. В качестве стартового столбца мы указали столбец #2, а в качестве конечного #4

Абсолютно так же можно применять свойство grid-row;
Пару свойств grid-column и grid-row так же можно объединить в одно:
grid-area;

Синтаксис следующий:
grid-area: 1/2/3/4; (Номер стартовой строки/Номер стартового столбца/Номер конечной строки/Номер конечного столбца);

Давайте теперь с помощью изученных свойств попробуем что-то сверстать.

Направление: