grid-row-start

Свойство grid-row-start определяет начальную позицию элемента сетки по вертикали.

Краткая информация

Значение по умолчанию auto
Наследуется Нет
Применяется К грид-элементам
Анимируется Нет

Синтаксис

grid-row-start: 
  auto | 
  <идентификатор> |
  [ [ <целое число [-∞,-1]> | <целое число [1,∞]> ] && <идентификатор>? ]  |
  [ span && [ <целое число [1,∞]>  || <идентификатор> ] ]
Описание Пример
<тип> Указывает тип значения. <размер>
A && B Значения должны выводиться в указанном порядке. <размер> && <цвет>
A | B Указывает, что надо выбрать только одно значение из предложенных (A или B). normal | small-caps
A || B Каждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке. width || count
[ ] Группирует значения. [ crop || cross ]
* Повторять ноль или больше раз. [,<время>]*
+ Повторять один или больше раз. <число>+
? Указанный тип, слово или группа не является обязательным. inset?
{A, B} Повторять не менее A, но не более B раз. <радиус>{1,4}
# Повторять один или больше раз через запятую. <время>#

Значения

auto
Автоматически определяет начало элемента на основе его положения внутри сетки.
<идентификатор>
Если имеется пользовательское имя линии, которое задано с помощью свойства grid-template-rows, то элемент сетки будет начинаться от него.
<целое число>
Указывает номер линии, от которой должен начинаться элемент сетки. Отрицательное значение считается в обратном порядке, от последней линии сетки. Нулевое значение недопустимо.
<целое число> <идентификатор>
Если имеются линии сетки с одинаковыми именами, помогает указать, какая из этих линий указана.
span <целое число>
Ключевое слово span, за которым следует положительное целое число больше нуля, указывает количество дорожек которое охватывает элемент сетки от определённой линии.
span <идентификатор>
Элемент сетки будет идти до линии с указанным именем.

Песочница

1
2
3
4
5
6
7
8
.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  gap: 0.5rem;
}
.grid-item {
  grid-row-start: {{ playgroundValue }};
}

Пример

<!DOCTYPE html> <html lang="ru"> <head> <meta charset="utf-8"> <title>grid-row-start</title> <style> body { margin: 0; /* Убираем поля */ } .container { display: grid; /* Устанавливаем сетку */ grid-template-rows: 1fr 1fr 1fr; /* Три строки одинакового размера */ grid-template-columns: 1fr 1fr 1fr; /* Три столбца одинакового размера */ height: 100vh; /* Полная высота */ } .item1, .item2, .item3 { display: flex; /* Для выравнивания текста */ background-color: cadetblue; /* Цвет фона */ color: white; /* Цвет текста */ font-size: 3em; /* Размер текста */ align-items: center; /* Выравнивание по вертикали */ justify-content: center; /* Выравнивание по горизонтали */ } .item1 { grid-row-start: 1; grid-row-end: 2; /* От первой до второй линии */ grid-column-start: 1; grid-column-end: 2; } .item2 { grid-row-start: 2; grid-row-end: 3; /* От второй до третьей линии */ grid-column-start: 2; grid-column-end: 3; } .item3 { grid-row-start: 3; grid-row-end: 4; /* От третьей до четвёртой линии */ grid-column-start: 3; grid-column-end: 4; } </style> </head> <body> <div class="container"> <div class="item1">1</div> <div class="item2">2</div> <div class="item3">3</div> </div> </body> </html>

Объектная модель

Объект.style.gridRowStart

Спецификация

CSS Grid Layout Module Level 2

Браузеры

16 57 44 10.1 52
57 52 43 10.3

В таблице браузеров применяются следующие обозначения.

  • — элемент полностью поддерживается браузером;
  • — элемент браузером не воспринимается и игнорируется;
  • — при работе возможно появление различных ошибок, либо элемент поддерживается с оговорками.

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