Свойство CSS grid-row
Узнайте, как свойство-сокращение CSS grid-row задаёт позицию и размер элементов сетки по строкам, с синтаксисом, значениями и примерами.
Свойство CSS grid-row задаёт позицию и размер элемента сетки внутри строк CSS grid. Это сокращение, объединяющее grid-row-start и grid-row-end в одно объявление и определяющее, на какой линии строки элемент начинается и на какой заканчивается.
Сетка разделена горизонтальными линиями строк, пронумерованными с 1 у верхнего края. grid-row указывает элементу растягиваться от начальной линии до конечной. Для независимого управления каждой границей используйте полные свойства напрямую:
- grid-row-start — линия, с которой начинается элемент.
- grid-row-end — линия, на которой заканчивается элемент.
Таким образом, grid-row: 1 / 3 полностью эквивалентно записи grid-row-start: 1; grid-row-end: 3.
| Начальное значение | auto / auto |
|---|---|
| Применяется к | Элементам сетки |
| Наследуется | Нет |
| Анимируется | Да |
| Версия | CSS Grid Layout Module Level 1 |
| DOM Syntax | object.style.gridRow = "1 / span 2" |
Синтаксис
grid-row: <start-line> / <end-line>;Значение до косой черты — начальная линия; значение после неё — конечная. Конечная линия не включается — элемент заполняет треки вплоть до этой линии, но не включая её. Можно комбинировать номера линий, span и именованные линии:
/* Explicit line numbers */
grid-row: 2 / 4; /* start at line 2, end at line 4 → spans rows 2 and 3 */
/* Span keyword */
grid-row: 2 / span 2; /* start at line 2, span 2 rows */
grid-row: span 3; /* span 3 rows from wherever auto-placement puts the item */
/* Negative line number */
grid-row: 1 / -1; /* from first line to last line (full height) */
/* Single value — sets start only; end defaults to auto (one row) */
grid-row: 3;Как нумеруются линии строк
Сетка с тремя явными строками имеет четыре линии строк: линии 1, 2, 3 и 4. Положительные числа считаются сверху; отрицательные — снизу, поэтому -1 всегда является последней явной линией. Это делает grid-row: 1 / -1 надёжным способом растянуть элемент на всю высоту явной сетки независимо от количества строк.
Если вы ссылаетесь на линию, которой не существует — например grid-row: 1 / 6 для трёхстрочной сетки — браузер создаёт неявные строки для её удовлетворения. Размер этих неявных строк определяется свойством grid-auto-rows.
Базовый пример: размещение элемента в определённой строке
Элемент с классом .box перемещается во вторую строку с помощью grid-row: 2 / 3. Первая строка остаётся пустой, а остальные элементы заполняют ячейки автоматически.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.grid-container {
display: grid;
grid-template-columns: auto 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: 2 / 3;
}
</style>
</head>
<body>
<h2>Grid-row 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>7</div>
</div>
</body>
</html>Результат
![CSS grid-row с двумя элементами](/uploads/media/default/0001/04/90bf26fe77ccc66f3b0039d2cc9a0232626ef7ca.png "CSS grid-row example result" =420x)
Растягивание на несколько строк с помощью span
Использование grid-row: span 2 заставляет элемент занимать две строки без указания точных номеров линий. Алгоритм автоматического размещения вставляет элемент туда, где он помещается, и растягивает его вниз на две строки. Последующие элементы смещаются в следующие доступные ячейки.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.grid-container {
display: grid;
grid-template-columns: auto 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: span 2;
}
</style>
</head>
<body>
<h2>Grid-row span 2 example</h2>
<div class="grid-container">
<div>1</div>
<div>2</div>
<div>3</div>
<div class="box">4</div>
<div>5</div>
<div>6</div>
<div>7</div>
</div>
</body>
</html>Когда использовать grid-row
Используйте grid-row, когда элемент должен занимать определённый вертикальный фрагмент сетки, а не одну ячейку, которую давало бы автоматическое размещение. Типичные случаи применения:
- Боковая панель или герой на всю высоту:
grid-row: 1 / -1растягивает элемент от первой до последней явной линии строк. - Выделенная плитка в сетке карточек:
grid-row: span 2делает одну карточку визуально выше соседних. - Фиксация на конкретной линии:
grid-row: 2 / 4удерживает элемент в заданной вертикальной позиции даже при изменении окружающего содержимого.
Для управления горизонтальным размещением используйте соответствующее свойство grid-column. Чтобы задать оба направления одновременно, сокращение grid-area объединяет grid-row и grid-column в одно объявление. Чтобы определить, как сетка создаёт строки автоматически, см. grid-template-rows и grid-auto-rows.
Важно: номера линий считают линии между треками, а не сами треки. Трёхстрочная сетка имеет четыре линии строк (1–4). Отрицательные числа считаются с конца:
-1— последняя явная линия,-2— предпоследняя и так далее. Еслиgrid-rowссылается на линию за пределами явной сетки, браузер добавляет неявные строки с размером, заданнымgrid-auto-rows.
Значения
| Значение | Описание |
|---|---|
<line> | Целое число (положительное или отрицательное), ссылающееся на конкретную линию строки сетки. |
span <n> | Элемент охватывает n треков строк. Может использоваться как начальное или конечное значение. |
auto | Значение по умолчанию — размещение и охват определяются алгоритмом автоматического размещения (одна строка). |
initial | Сбрасывает свойство до начального значения (auto). |
inherit | Наследует значение от родительского элемента. |