Использование 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;
(Номер стартовой строки/Номер стартового столбца/Номер конечной строки/Номер конечного столбца);
Давайте теперь с помощью изученных свойств попробуем что-то сверстать.