grid-column, grid-row

Свойства-шорткаты для 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-start, grid-column-end, grid-row-start и grid-row-end, разделяя их слэшем.

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