Свойство CSS grid-row

Определение и использование

Свойство grid-row определяет размер и положение элемента в сетке и является сокращением следующих свойств:

См. также:

CSS учебник:CSS сетка

Пример

Пример 1

Сделайте "item1" начинаться на строке 1 и охватывать два ряда:

.item1 {
  grid-row: 1 / span 2;
}

Попробуйте сами

Пример 2

Вы можете использовать значение строки вместо количества строк, которые нужно охватить:

.item1 {
  grid-row: 1 / 3;
}

Попробуйте сами

CSS синтаксис

grid-row: grid-row-start / grid-row-end;

Значение атрибута

Значение Описание
grid-row-start Определяет, с какой строки начинается отображение элемента.
grid-row-end Определяет, на哪个 строке останавливается отображение элемента, или сколько строк он охватывает.

Технические детали

Значение по умолчанию: auto / auto
Инheritance: Нет
Создание анимации: Поддерживается. См. также:Свойства анимации.
Версия: CSS Grid Layout Module Level 1
JavaScript синтаксис: object.style.gridRow="2 / span 2"

Поддержка браузерами

Числа в таблице указывают на первую версию браузера, которая полностью поддерживает этот атрибут.

Chrome IE / Edge Firefox Safari Opera
57 16 52 10 44