grid-row

Это свойство является сокращением для следующих свойств CSS:

• grid-row-end
• grid-row-start

/* Keyword values */
grid-row: auto;
grid-row: auto / auto;

/* <custom-ident> values */
grid-row: some-grid-area;
grid-row: some-grid-area / some-other-grid-area;

/* <integer> + <custom-ident> values */
grid-row: some-grid-area 4;
grid-row: 4 some-grid-area / 6;

/* span + <integer> + <custom-ident> values */
grid-row: span 3;
grid-row: span some-grid-area;
grid-row: 5 some-grid-area span;
grid-row: span 3 / 6;
grid-row: span some-grid-area / span some-other-grid-area;
grid-row: 5 some-grid-area span / 2 span;

/* Global values */
grid-row: inherit;
grid-row: initial;
grid-row: revert;
grid-row: revert-layer;
grid-row: unset;

Это свойство задаётся одним или двумя <grid-line> значениями.

Если заданы два <grid-line> значения, они разделяются /. grid-row-start длинное свойство устанавливается в значение перед косой чертой, а grid-row-end длинное свойство устанавливается в значение после косой черты.

Каждое <grid-line> значение может быть задано как:

• ключевое слово auto
• или значение <custom-ident>
• или значение <integer>
• или оба <custom-ident> и <integer>, разделённые пробелом
• или ключевое слово span вместе с <custom-ident>, или <integer>, или обоими.

auto

Ключевое слово, указывающее, что свойство ничего не вносит в размещение элемента сетки, указывая на автоматическое размещение, автоматический размах или стандартный размах 1.

<custom-ident>

Если существует именованная линия с именем <custom-ident>-start/<custom-ident>-end, она вносит первую такую линию в размещение элемента сетки.

Примечание: Именованные области сетки автоматически генерируют неявные именованные линии такого вида, поэтому указание grid-row: foo; выберет начальный/конечный край этой именованной области сетки (если другая линия с именем foo-start/foo-end не была явно указана перед ней).

В противном случае это обрабатывается так, как если бы целое число 1 было указано вместе с <custom-ident>.

<integer> && <custom-ident>?

Вносит n-ю линию сетки в размещение элемента сетки. Если указано отрицательное целое число, оно вместо этого считает в обратном порядке, начиная с конечного края явной сетки.

Если имя задано как <custom-ident>, считаются только линии с этим именем. Если недостаточно линий с этим именем, все неявные линии сетки предполагаются имеющими это имя для целей поиска этого положения.

Значение <integer> 0 недопустимо.

span && [ <integer> || <custom-ident> ]

Вносит размах сетки в размещение элемента сетки таким образом, что соответствующий край области сетки элемента сетки находится на n линиях от противоположного края.

Если имя задано как <custom-ident>, считаются только линии с этим именем. Если недостаточно линий с этим именем, все неявные линии сетки на стороне явной сетки, соответствующей направлению поиска, предполагаются имеющими это имя для целей подсчёта этого размаха.

Если <integer> опущено, оно по умолчанию равно 1 Отрицательные целые числа или 0 недопустимы.

grid-row = 
  <grid-line> [ / <grid-line> ]?  

<grid-line> = 
  auto                                                |
  <custom-ident>                                      |
  [ [ <integer [-∞,-1]> | <integer [1,∞]> ] && <custom-ident>? ]  |
  [ span && [ <integer [1,∞]> || <custom-ident> ] ]   

HTML

<div id="grid">
  <div id="item1"></div>
  <div id="item2"></div>
  <div id="item3"></div>
</div>

CSS

#grid {
  display: grid;
  height: 200px;
  grid-template-columns: 200px;
  grid-template-rows: repeat(6, 1fr);
}

#item1 {
  background-color: lime;
}

#item2 {
  background-color: yellow;
  grid-row: 2 / 4;
}

#item3 {
  background-color: blue;
  grid-row: span 2 / 7;
}

Результат

• grid-row-start
• grid-row-end
• grid-column
• grid-column-start
• grid-column-end
• Базирование размещения в CSS сетке
• Видео: Базирование размещения