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,∞]>  || <идентификатор> ] ]

Значения

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: auto;
}

Пример

Код примера скопирован в буфер
<!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
Гриды