CSS свойство grid-row

Определение и применение

Свойство grid-row задаётся Grid-элементу и определяет начальную и конечную линии его области по блочной оси.

При горизонтальном письме и ltr линии строк считают сверху вниз. Направления меняются вместе с writing-mode и direction.

Например, grid-row: 1 / 3 занимает две дорожки между линиями 1 и 3; 1 / span 2 задаёт ту же протяжённость. Если конец пропущен, он обычно становится auto; одиночное имя области передаётся обеим составляющим.

При размещении за границами явной сетки могут появиться неявные дорожки. Номер 0 недопустим. Не задавайте обе границы через span, если хотите однозначно определить начало.

Связанные свойства: grid-template-columns, grid-template-rows, grid-auto-flow.

Выберите элемент и настройте занимаемые им строки через номера линий или span в генераторе Grid. Настройки можно проверить в превью и сохранить как HTML/CSS.

Попробуйте значения grid-row

Меняется только оранжевый элемент. Нумерация линий сетки начинается с 1; остальные элементы размещаются автоматически.

Значение свойства

grid-row: auto

HTML и CSS примера
HTML
<div class="stage">
  <div class="item">1</div>
  <div class="item demo-target">2</div>
  <div class="item">3</div>
</div>
CSS
* {
  box-sizing: border-box;
}
.stage {
  width: 100%;
  max-width: 300px;
  height: 210px;
  padding: 10px;
  border: 2px dashed #607589;
  background: #edf2f5;
  color: #172c3d;
  font: 16px/1.4 system-ui;
}
.item {
  padding: 10px;
  border: 2px solid #245a85;
  background: #b9d7eb;
}
.stage {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 50px);
  gap: 6px;
}
.demo-target {
  background: #ffe4bd;
  grid-row: auto;
}

Сравнение при ltr и rtl: grid-row

Строки: область между линиями 1 и 3 занимает две дорожки.

Выберите direction (направление письма). Во всех схемах задано writing-mode: horizontal-tb (горизонтальное письмо, строки идут сверху вниз).

Направление письма — direction
1234
123456Элемент
123

При ltr линии столбцов считаются слева направо, при rtl — справа налево. Линии строк в обоих случаях считаются сверху вниз. Последняя линия явной сетки также имеет номер -1.

Поддержка браузерами

Спецификация: CSS grid

Поддерживается во всех основных браузерах с 2017 года.

Показать браузеры
Совместимостьcss.properties.grid-row
ВозможностьКомпьютерыМобильные
ChromeEdgeFirefoxOperaSafariChrome AndroidFirefox for AndroidOpera AndroidSafari on iOSSamsung BrowserWebView AndroidWebView on iOS
grid-row✓57✓16✓52✓44✓10.1✓57✓52✓43✓10.3✓6.0✓57✓10.3
auto✓57✓16✓52✓44✓10.1✓57✓52✓43✓10.3✓7.0✓57✓10.3

поддерживаетсяс ограниченияминет поддержкинет данных≤31 — не позднее версии 31

Синтаксис

CSS
grid-row: <grid-line> [ / <grid-line> ]?;

/* Глобальные значения */
grid-row: initial | inherit | unset | revert | revert-layer;

<grid-line> — auto, имя, ненулевой номер с необязательным именем или span с положительным числом и/или именем. Косая черта разделяет начало и конец; ? обозначает необязательную часть.

JavaScript:

JavaScript
element.style.gridRow="1 / 5";

Начальное значение свойства

  • grid-row-start — auto;
  • grid-row-end — auto.

Значения свойства

Значения grid-row
Значение Описание
auto Автоматическая позиция или диапазон; значение не фиксирует конкретную линию.
<integer> Ненулевой номер линии. Положительные номера идут от начала явной сетки, отрицательные — от её конца. -1 — последняя линия явной сетки, а не последняя линия всех неявных дорожек.
<custom-ident> Имя линии или имя области, из которого выбирается подходящая граница -start / -end. Это идентификатор без кавычек.
<integer> <custom-ident> Выбирает указанное по счёту вхождение именованной линии, например 2 content.
span <integer> / span <custom-ident> Задаёт протяжённость относительно противоположной границы. Число после span должно быть положительным; можно сочетать число и имя. span 2 охватывает две дорожки.
initial Устанавливает начальное значение свойства.
inherit Наследует вычисленное значение свойства у родительского элемента.
unset Для ненаследуемого свойства grid-row устанавливает его начальное значение.
revert Отменяет заданное в коде значение свойства для этого элемента: применяются пользовательские или стандартные стили браузера. Если они не задают значение, свойство наследуется или получает начальное значение по обычным правилам. Не возвращает значение из предыдущей строки CSS.
revert-layer Сбрасывает значение свойства для текущего слоя каскада @layer. Применяется значение из другого слоя по правилам каскада; если подходящего значения нет, возможен откат к стилям пользователя или браузера.

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

CSS Grid Layout — спецификация grid-row.

Наследуется

Нет.

Анимируемое

Дискретно: значение переключается, а не создаёт плавное перемещение элементов.

Примеры, попробуйте сами

Размещение по линиям сетки

Блок 2 занимает две строки. Замените 1 / 3 на 2 / 3.

base.css
CSS
* {
    box-sizing: border-box;
}
body {
    margin: 16px;
    font:
        16px/1.5 system-ui,
        sans-serif;
    color: #172c3d;
}
section {
    margin-bottom: 24px;
    min-width: 0;
}
h3 {
    margin: 0 0 12px;
    font-size: 16px;
}
.item {
    padding: 8px;
    min-width: 0;
    background: #c5dbea;
    border: 1px solid #35658a;
    overflow-wrap: anywhere;
}
index.html
HTML
<!doctype html>
<html lang="ru">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1" />
    <title>Размещение по линиям сетки</title>
  </head>
  <body>
    <div class="container">
      <div class="item">1</div>
      <div class="item target">2</div>
      <div class="item">3</div>
      <div class="item">4</div>
    </div>
  </body>
</html>
style.css
CSS
.container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: 50px;
    gap: 6px;
}
.target {
    grid-row: 1 / 3;
}