W3docs
ru
Войти

CSS-свойство grid-template-rows

Свойство CSS grid-template-rows: размеры треков, единицы fr, repeat(), minmax(), именованные линии, subgrid и практические примеры.

Свойство grid-template-rows определяет количество строк в CSS-сетке и высоту каждой из них. Размеры треков перечисляются через пробел, и CSS создаёт одну явную строку для каждого значения. Например, grid-template-rows: 100px 200px создаёт две строки: первая высотой 100 пикселей, вторая — 200 пикселей.

Это свойство применяется только к контейнерам сетки (элементам с display: grid или display: inline-grid). Оно является аналогом grid-template-columns в направлении строк, и эти два свойства часто используются вместе для построения полной сетки.

Размер трека может быть фиксированной длиной, процентом, гибкой единицей fr, ключевым словом на основе содержимого или функцией, например repeat() и minmax(). Сочетание этих значений и делает сеточные макеты гибкими:

  • Используйте длину (px, rem), когда строка должна иметь точную высоту.
  • Используйте fr, когда строки должны пропорционально делить оставшееся пространство.
  • Используйте auto или min-content / max-content, когда строка должна подстраиваться под содержимое.
  • Используйте repeat(), чтобы не повторять одинаковые значения размеров.
  • Используйте minmax(), когда строке нужен минимальный и максимальный размер (например, «не менее 100px, но может расти при необходимости»).
Информация

Строки, создаваемые здесь, образуют явную сетку. Если элементы выходят за пределы определённых строк, лишние строки размещаются в соответствии с правилами grid-auto-rows.

Начальное значениеnone
Применяется кКонтейнерам сетки.
НаследуетсяНет.
АнимируемоеДа. Размеры строк можно анимировать.
ВерсияCSS Grid Layout Module Level 1
DOM-синтаксисobject.style.gridTemplateRows = "20px 100px"

Синтаксис

grid-template-rows: none
                  | auto
                  | max-content
                  | min-content
                  | <length>
                  | <percentage>
                  | <flex>           /* e.g. 1fr */
                  | fit-content(<length-percentage>)
                  | repeat(<count>, <track-list>)
                  | minmax(<min>, <max>)
                  | subgrid
                  | [line-name] <track-size> [line-name];

Стандартные ключевые слова initial и inherit также применяются, как и в любом другом CSS-свойстве.

Базовое использование

Строки с автоматическим размером

При значении auto каждая строка растягивается по высоте самой высокой ячейки. Это наиболее распространённый отправной пункт.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .auto-container {
        display: grid;
        grid-template-columns: auto auto auto auto;
        grid-template-rows: auto auto;
        gap: 10px;
        background-color: #ccc;
        padding: 10px;
        margin-top: 30px;
      }
      .auto-container > div {
        background-color: #eee;
        text-align: center;
        padding: 30px 0;
        font-size: 30px;
      }
    </style>
  </head>
  <body>
    <h2>grid-template-rows: auto auto</h2>
    <div class="auto-container">
      <div>1</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
      <div>5</div>
      <div>6</div>
      <div>7</div>
      <div>8</div>
    </div>
  </body>
</html>
Попробуйте сами »
Пример результата CSS grid-template-rows: auto auto

При использовании grid-template-rows: auto auto обе строки растягиваются по содержимому, поэтому каждая ячейка имеет ту же высоту, что и самая высокая ячейка в этой строке.

Строки с фиксированной высотой

Укажите значения в пикселях, чтобы зафиксировать высоту строк независимо от содержимого.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .grid-container {
        display: grid;
        grid-template-columns: auto auto auto auto;
        grid-template-rows: 100px 300px;
        gap: 10px;
        background-color: #ccc;
        padding: 10px;
      }
      .grid-container > div {
        background-color: #eee;
        text-align: center;
        padding: 20px 0;
        font-size: 30px;
      }
    </style>
  </head>
  <body>
    <h2>grid-template-rows: 100px 300px</h2>
    <div class="grid-container">
      <div>1</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
      <div>5</div>
      <div>6</div>
      <div>7</div>
      <div>8</div>
    </div>
  </body>
</html>
Попробуйте сами »

Здесь строки имеют фиксированные размеры: первая всегда 100 пикселей высотой, вторая всегда 300 пикселей, независимо от объёма содержимого ячеек. Содержимое, выходящее за эти границы, обрезается или прокручивается в зависимости от значения свойства overflow.

Единицы fr, repeat() и minmax()

Единица fr

fr («fraction», дробная часть) представляет долю свободного пространства в сетке, оставшегося после размещения треков фиксированного размера. Свободное пространство — это общий размер сетки минус пространство, занятое треками с абсолютными или основанными на содержимом размерами.

/* Three equal rows */
grid-template-rows: 1fr 1fr 1fr;

/* Header takes half, body takes the other half */
grid-template-rows: 1fr 1fr;

/* Header is fixed, body gets all remaining space */
grid-template-rows: 80px 1fr;

Единица fr полезна, когда сетка имеет известную высоту (заданную на контейнере) и треки должны заполнить её без каких-либо вычислений.

repeat()

repeat(count, track-list) — сокращённая запись для повторения одного или нескольких размеров треков.

/* Same as: 1fr 1fr 1fr 1fr */
grid-template-rows: repeat(4, 1fr);

/* Alternating: 80px 1fr 80px 1fr */
grid-template-rows: repeat(2, 80px 1fr);

minmax()

minmax(min, max) задаёт треку минимальный и максимальный размер. Браузер определяет фактический размер в пределах этого диапазона, исходя из содержимого и доступного пространства.

/* Row is at least 80px; grows with content up to 200px */
grid-template-rows: minmax(80px, 200px);

/* Row is at least 80px; grows to fill remaining space */
grid-template-rows: minmax(80px, 1fr);

Совместное использование всех трёх

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .flex-grid {
        display: grid;
        height: 600px;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: repeat(2, 1fr) minmax(80px, auto);
        gap: 10px;
        background-color: #ccc;
        padding: 10px;
      }
      .flex-grid > div {
        background-color: #eee;
        text-align: center;
        padding: 10px;
        font-size: 24px;
      }
    </style>
  </head>
  <body>
    <h2>fr, repeat() and minmax()</h2>
    <div class="flex-grid">
      <div>1</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
      <div>5</div>
      <div>6</div>
    </div>
  </body>
</html>

Высота сетки составляет 600 пикселей. repeat(2, 1fr) создаёт две строки, каждая из которых занимает равную долю доступной высоты. Третья строка использует minmax(80px, auto): она имеет высоту не менее 80 пикселей, но расширяется, если содержимое выше.

Именованные линии треков

Линиям между строками можно давать имена, заключая их в квадратные скобки. Именованные линии значительно упрощают позиционирование элементов с помощью grid-row без необходимости считать линии сетки.

.layout {
  display: grid;
  grid-template-rows:
    [header-start] 80px [header-end body-start]
    1fr
    [body-end footer-start] 60px [footer-end];
}

/* Place an item from body-start to body-end */
.main {
  grid-row: body-start / body-end;
}

Линия может иметь несколько имён, разделённых пробелами в одних скобках — [header-end body-start] означает, что эта линия одновременно является концом шапки и началом основного содержимого.

Ключевые слова на основе содержимого

auto

auto означает, что размер трека определяется его содержимым (эквивалентно minmax(auto, auto)). Строка растягивается по самому высокому элементу, но не сжимается ниже минимального размера содержимого. Когда в том же объявлении присутствуют треки fr, сначала вычисляются треки auto, а треки fr делят оставшееся пространство.

min-content

Строка имеет ровно ту высоту, которая необходима для размещения наименьшего содержимого в любой из её ячеек — на практике такую же высоту, как самое длинное слово или наименьшее изображение.

max-content

Строка достаточно высока для размещения наибольшего содержимого без переноса. Эквивалентно предоставлению каждой ячейке столько вертикального пространства, сколько ей нужно.

fit-content(<value>)

fit-content(200px) ведёт себя как auto (растягивается по содержимому), но ограничивается указанным аргументом. Эквивалентно min(max-content, max(auto, 200px)). Полезно, когда строка должна подстраиваться под содержимое, но не превышать определённый предел.

subgrid

Когда элемент сетки сам является контейнером сетки, значение subgrid для grid-template-rows указывает этой внутренней сетке использовать треки строк родительской сетки, а не создавать свои собственные. Это позволяет выравнивать содержимое внутри вложенных элементов сетки по ритму внешней сетки.

.parent {
  display: grid;
  grid-template-rows: 80px 1fr 60px;
}

.child {
  display: grid;
  /* This child spans 3 rows of the parent */
  grid-row: 1 / 4;
  /* Adopt those same 3 row tracks */
  grid-template-rows: subgrid;
}

subgrid широко поддерживается с конца 2023 года (Chrome 117+, Firefox 71+, Safari 16+).

auto-fill и auto-fit в repeat()

auto-fill и auto-fit используются внутри repeat() для создания максимально возможного количества треков, умещающихся в контейнере. Чаще они встречаются с grid-template-columns, но так же работают со строками, когда у контейнера задана фиксированная высота.

/* As many rows of at least 100px as will fit */
grid-template-rows: repeat(auto-fill, minmax(100px, 1fr));
  • auto-fill — заполняет сетку максимальным количеством треков, даже если некоторые из них пусты.
  • auto-fit — то же, что auto-fill, но свёртывает пустые треки до нулевого размера, чтобы элементы растянулись на доступное пространство.

Значения

ЗначениеОписание
noneПо умолчанию. Явные строки не определены; все строки являются неявными.
autoВысота строки определяется её содержимым или доступным пространством.
max-contentСтрока имеет высоту наибольшего внутреннего размера среди её элементов.
min-contentСтрока имеет высоту наименьшего внутреннего размера среди её элементов.
minmax(min, max)Размер трека находится в заданном диапазоне. min не может быть fr; max — может.
<length>Фиксированная высота, например 100px или 2rem.
<percentage>Высота относительно высоты контейнера сетки (должна быть определённой).
<flex> (fr)Неотрицательное значение, занимающее долю оставшегося свободного пространства.
fit-content(<value>)Размер по содержимому, но ограниченный указанным аргументом.
repeat(count, tracks)Повторяет шаблон размеров треков. count может быть числом, auto-fill или auto-fit.
subgridСписок треков наследуется от родительской сетки.
initialСбрасывает свойство до значения по умолчанию (none).
inheritНаследует значение от родительского элемента.

Типичные ошибки

  • fr требует определённой высоты контейнера. Если контейнер сетки не имеет явно заданной height, свободного пространства для строк fr нет — они сворачиваются до размеров auto. Всегда устанавливайте height (или min-height) на контейнере при использовании fr в строках.
  • Проценты также требуют определённой высоты контейнера по той же причине. Если высота контейнера определяется содержимым, процентные размеры строк тоже сводятся к auto.
  • Только явные строки. Это свойство задаёт размеры объявленных строк. Дополнительные строки, генерируемые для переполняющих элементов, размещаются по правилам grid-auto-rows — эти неявные строки по умолчанию имеют значение auto, если grid-auto-rows не задан.
  • minmax(0, 1fr) vs 1fr. Единица fr имеет неявный минимум auto, поэтому строки 1fr не могут сжиматься ниже размера содержимого. Используйте minmax(0, 1fr), когда явно хотите, чтобы строки сжимались ниже содержимого — например, внутри контейнеров с прокруткой.

Практика

Практика
Что делает свойство grid-template-rows в CSS?
Что делает свойство grid-template-rows в CSS?

Связанные свойства

  • grid-template-columns — аналог данного свойства в направлении столбцов.
  • grid-auto-rows — задаёт размеры строк, создаваемых неявно, за пределами явной сетки.
  • grid-template-areas — именует области сетки для размещения элементов по ссылке.
  • grid-template — сокращённая запись для строк, столбцов и областей в одном объявлении.
  • grid-row — сокращённая запись для размещения или растягивания элемента сетки по трекам строк.
  • grid-auto-flow — управляет направлением и алгоритмом упаковки для автоматически размещаемых элементов.
  • grid — полное сокращённое свойство сетки и отправная точка для сеточных макетов.
Was this page helpful?