grid-column, grid-row

Где начнётся и где закончится грид-элемент?

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

Кратко

Скопировано

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

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

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

Пример

Скопировано

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

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

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

Как пишется

Скопировано

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

Подсказки

Скопировано

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

Поддержка в браузерах:
  • Chrome 66, поддерживается
  • Edge 79, поддерживается
  • Firefox 76, поддерживается
  • Safari 12.1, поддерживается
О Baseline