grid-row-end

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

grid-row-end можно использовать вместе со свойством grid-row-start для создания дорожек сетки с заданным размером и расположением.


.grid-item {
  grid-row-start: 2;
  grid-row-end: 4;
}

Здесь элемент с классом grid-item будет идти от второй линии сетки по вертикальной оси и занимать две дорожки.

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

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

Синтаксис

grid-row-end: 
  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: 1;
  grid-row-end: {{ playgroundValue }};
}

Пример

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>grid-row-end</title> <style> body { margin: 0; /* Убираем поля */ } .grid-container { display: grid; /* Устанавливаем сетку */ grid-template-rows: 1fr 1fr; /* Две строки одинакового размера */ grid-template-columns: 1fr 1fr; /* Два столбца одинакового размера */ height: 100vh; /* Полная высота */ color: #fff; /* Белый цвет текста */ font-size: 2.5em; /* Размер шрифта */ gap: 10px; /* Величина интервала */ } .grid-item { display: flex; /* Для выравнивания текста */ align-items: center; /* Выравнивание текста по вертикали */ justify-content: center; /* Выравнивание текста по горизонтали */ } .one { background: #508694; /* Цвет фона */ grid-row-start: 1; grid-row-end: 3; /* Элемент сетки занимает два ряда */ } .two { background: #BB844C; /* Цвет фона */ } .three { background: #929D79; /* Цвет фона */ } </style> </head> <body> <div class="grid-container"> <div class="grid-item one">Первый</div> <div class="grid-item two">Второй</div> <div class="grid-item three">Третий</div> </div> </body> </html>

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

Объект.style.gridRowEnd

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

CSS Grid Layout Module Level 2

Браузеры

16 57 44 10.1 52
57 52 43 10.3

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

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

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