grid-column, grid-row

Время чтения: меньше 5 мин

Кратко

Секция статьи "Кратко"

Свойства-шорткаты для grid-column-start + grid-column-end и grid-row-start + grid-row-end соответственно. Статья про эти свойства.

Значения для *-start и *-end разделяются слэшем.

Можно использовать ключевое слово span, буквально говорящее «растянись на столько-то». А на сколько, указывает стоящая за ним цифра.

Пример

Секция статьи "Пример"

Элемент начинается с третьей линии по горизонтали и растягивается на 2 ячейки. По вертикали элемент начинается от линии с именем [third-line] и заканчивается у четвёртой линии:

        
          
          .item1 {  grid-column: 3 / span 2;  grid-row: third-line / 4;}
          .item1 {
  grid-column: 3 / span 2;
  grid-row: third-line / 4;
}

        
        
          
        
      
Пример реализации свойств-шорткатов grid-column, grid-row.

Как пишется

Секция статьи "Как пишется"

Используйте доступные значения свойств grid-column-start, grid-column-end, grid-row-start и grid-row-end, разделяя их слэшем.

Подсказки

Секция статьи "Подсказки"

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