Кратко
Секция статьи "Кратко"Свойства-шорткаты для grid
+ grid
и grid
+ grid
соответственно. Статья про эти свойства.
Значения для *
и *
разделяются слэшем.
Можно использовать ключевое слово span
, буквально говорящее «растянись на столько-то». А на сколько, указывает стоящая за ним цифра.
Пример
Секция статьи "Пример"Элемент начинается с третьей линии по горизонтали и растягивается на 2 ячейки. По вертикали элемент начинается от линии с именем [third
и заканчивается у четвёртой линии:
.item1 { grid-column: 3 / span 2; grid-row: third-line / 4;}
.item1 { grid-column: 3 / span 2; grid-row: third-line / 4; }

Как пишется
Секция статьи "Как пишется"Используйте доступные значения свойств grid
, grid
, grid
и grid
, разделяя их слэшем.
Подсказки
Секция статьи "Подсказки"💡 Если опустить слэш и второе значение, то элемент будет размером в одну ячейку.