grid-row-end

Базовая Широкодоступная

Эта функция хорошо зарекомендовала себя и работает на многих устройствах и версиях браузеров. Она доступна в браузерах с октября 2017 года.

Свойство grid-row-end CSS определяет конечную позицию элемента сетки в строке сетки, внося линию, разброс или ничего (автоматически) в его размещение в сетке, тем самым определяя край inline-end его области сетки.

Попробуйте

Синтаксис

/* Keyword value */
grid-row-end: auto;

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

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

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

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

Значения

auto

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

<custom-ident>

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

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

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

<custom-ident> не может принимать значение span.

<integer> && <custom-ident>?

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

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

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

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

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

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

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

Формальное определение

Начальное значение	`auto`
Применяется к	элементам сетки и абсолютно позиционируемым блокам, содержащий блок которых является контейнером сетки
Наследуется	нет
Вычисленное значение	как указано
Тип анимации	дискретный

Формальный синтаксис

grid-row-end = 
  <grid-line>  

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

Примеры

Установка конечной строки для элемента сетки

HTML

<div class="wrapper">
  <div class="box1">One</div>
  <div class="box2">Two</div>
  <div class="box3">Three</div>
  <div class="box4">Four</div>
  <div class="box5">Five</div>
</div>

CSS

.wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 100px;
}

.box1 {
  grid-column-start: 1;
  grid-column-end: 4;
  grid-row-start: 1;
  grid-row-end: 3;
}

.box2 {
  grid-column-start: 1;
  grid-row-start: 3;
  grid-row-end: 5;
}

Результат

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

Спецификация
CSS Grid Layout Module Level 2 # line-placement

Совместимость с браузерами

	Рабочие столы					Мобильные устройства
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox для Android	Opera Android	Safari на IOS	Samsung Internet	WebView Android
`grid-row-end`	57	16	52	44	10.1	57	52	43	10.3	6.0	57

См. также

© 2005–2024 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row-end