CSS свойство grid-row-end
CSS свойство grid-row-end: задайте конец элемента сетки по строке — номером линии, span или auto. Синтаксис, значения, примеры.
CSS свойство grid-row-end задаёт, где элемент сетки заканчивается по блочной (строчной) оси. Можно указать номер строчной линии, на которой завершается элемент, span — количество строк, которые элемент должен занять, или auto, чтобы браузер разместил элемент автоматически. Вместе с grid-row-start это свойство определяет начальный и конечный края элемента по блочной оси его области в сетке.
Как нумеруются строчные линии сетки
Сетка ограничена пронумерованными линиями, а не самими треками (строками). Сетка из трёх строк имеет четыре горизонтальные линии: линия 1 проходит по верхнему краю, линия 4 — по нижнему.
line: 1 ─────────────────────
| row 1 |
line: 2 ─────────────────────
| row 2 |
line: 3 ─────────────────────
| row 3 |
line: 4 ─────────────────────grid-row-end ссылается на одну из этих линий:
grid-row-end: 3делает так, что элемент заканчивается на линии 3 — он занимает строки 1 и 2, если начинается с линии 1.grid-row-end: span 2означает, что элемент заканчивается через 2 строки от места начала, независимо от абсолютного номера линии.
Можно также вести отсчёт с конца с помощью отрицательных чисел: -1 — последняя линия (нижний край), -2 — линия над ней. Таким образом, grid-row-end: -1 всегда достигает нижнего края явной сетки, сколько бы строк в ней ни было — удобно для элементов «на всю высоту».
Подсказка: значение описывает лишь то, где элемент заканчивается. Начало задаётся свойством
grid-row-start(или автоматическим размещением). Сокращённое свойствоgrid-rowзадаёт оба значения сразу — например,grid-row: 1 / 3размещает элемент от строчной линии 1 до строчной линии 3, охватывая две строки.
| Начальное значение | auto |
|---|---|
| Применяется к | Элементам сетки. |
| Наследуется | Нет. |
| Анимируемое | Да. |
| Версия | CSS Grid Layout Module Level 1 |
| DOM Синтаксис | object.style.gridRowEnd = "4"; |
Синтаксис
grid-row-end: auto | <integer> | span <integer> | inherit | initial | unset;Пример: значение с номером линии
Значение по умолчанию auto заставляет элемент занимать одну строку. Указав grid-row-end: 3 для элемента, который начинается с линии 1 (по умолчанию), он растянется на первые две строки — нижний край элемента окажется на линии 3.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.grid-container {
display: grid;
grid-template-columns: auto auto auto;
grid-gap: 10px;
background-color: #666;
padding: 10px;
}
.grid-container > div {
background-color: #eee;
text-align: center;
padding: 20px 0;
font-size: 30px;
}
.box {
grid-row-end: 3;
}
</style>
</head>
<body>
<h2>Grid-row-end property example</h2>
<div class="grid-container">
<div class="box">1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
</div>
</body>
</html>Результат
![CSS grid-row-end с несколькими элементами](/uploads/media/default/0001/04/260b91923438edb01b18d93650fd3050e244dd52.png "CSS grid-row-end example" =420x)
Элемент 1 заканчивается на строчной линии 3, поэтому он растягивается на первые две строки, а остальные элементы обтекают его. В следующем примере тот же эффект достигается с помощью ключевого слова span вместо фиксированного номера линии.
Пример: значение span
Использование span удобно, когда важно сколько строк занимает элемент, а не точная линия, на которой он заканчивается. grid-row-end: span 3 означает, что элемент растягивается на три строки вниз от места своего начала.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.grid-container {
display: grid;
grid-template-columns: auto auto auto;
grid-gap: 10px;
background-color: #666;
padding: 10px;
}
.grid-container > div {
background-color: #eee;
text-align: center;
padding: 20px 0;
font-size: 30px;
}
.box {
grid-row-end: span 3;
}
</style>
</head>
<body>
<h2>Grid-row-end property example</h2>
<div class="grid-container">
<div>1</div>
<div class="box">2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
</div>
</body>
</html>При grid-row-end: span 3 элемент 2 сохраняет автоматическую начальную линию и растягивается на три строки вниз, независимо от того, на какую абсолютную линию это приходится.
Значения
| Значение | Описание |
|---|---|
auto | Элемент занимает одну строку (автоматическое размещение). Это значение по умолчанию. |
span n | Элемент заканчивается через n строк после начальной линии. |
<integer> | Положительный или отрицательный номер строчной линии, на которой должен заканчиваться элемент. Отрицательные числа ведут отсчёт с конца сетки (-1 = последняя линия). |
initial | Устанавливает свойство в значение по умолчанию (auto). |
inherit | Наследует значение от родительского элемента. |
unset | Удаляет текущее значение, возвращаясь к наследуемому или начальному. |
Распространённые ошибки
span— относительное значение; номера линий — абсолютные.grid-row-end: 3всегда останавливается на линии 3;grid-row-end: span 3останавливается через три строки после начальной линии. Путаница между ними — наиболее частая ошибка при размещении в сетке.- Конец раньше начала? Браузер меняет их местами. Если
grid-row-endуказывает на линию раньшеgrid-row-start, браузер автоматически меняет два значения местами, чтобы область оставалась корректной. - Установка только
grid-row-endне перемещает начало. Начальная линия по-прежнему определяется автоматически. Чтобы зафиксировать оба края, используйте сокращённое свойствоgrid-row(grid-row: 1 / 3) или также укажитеgrid-row-start. - Отрицательные значения распространяются только на явную сетку.
-1указывает на последнюю линию сетки, определённой свойствомgrid-template-rows; оно не распространяется на неявно созданные строки. - Явное указание
width/heightобычно не нужно. Макет сетки автоматически задаёт размеры элементов в рамках назначенных ячеек.
Связанные свойства
grid-row-start— линия, с которой элемент начинается по строчной оси.grid-row— сокращённое свойство, задающее одновременно начальную и конечную строчные линии.grid-column-end— аналог данного свойства для оси столбцов.grid-template-rows— определяет строчные треки и линии между ними.grid-area— задаёт все четыре линии размещения (row-start, column-start, row-end, column-end) в одном объявлении.grid-auto-rows— управляет размером неявно создаваемых строчных треков, когда элементы выходят за пределы явной сетки.