Свойство CSS grid-auto-rows

Свойство grid-auto-rows задаёт размер (высоту) неявных строк сетки — строк, которые браузер создаёт автоматически, когда элементы выходят за пределы строк, определённых с помощью grid-template-rows. Оно не влияет на явные строки, для которых уже задан размер.

На этой странице рассматривается, что такое неявная строка, приведён полный список значений, которые принимает grid-auto-rows, а также запускаемые примеры для каждого из них.

Неявные и явные строки

В сетке существует два вида треков:

Явные строки — те, которые вы объявляете с помощью grid-template-rows. Их размер фиксируется этим объявлением.
Неявные строки — дополнительные строки, которые сетка генерирует по мере необходимости. Они появляются, когда элементов (или элементов, расположенных дальше вниз) больше, чем могут вместить явные строки.

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

Направление, в котором добавляются новые строки, управляется свойством grid-auto-flow; аналогом данного свойства для столбцов является grid-auto-columns.

Это свойство принимает следующие значения: auto, max-content, min-content, minmax(), <length>, <percentage> и flex-значение (fr).

Начальное значение	auto
Применяется к	Контейнерам сетки.
Наследуется	Нет.
Анимируемо	Да. Размер строк поддаётся анимации.
Версия	CSS Grid Layout Module Level 1
Синтаксис DOM	object.style.gridAutoRows = "40px";

Синтаксис

Синтаксис свойства CSS grid-auto-rows

grid-auto-rows: auto | max-content | min-content | <length> | <percentage> | <flex> | initial | inherit;

Пример свойства grid-auto-rows:

Пример свойства CSS grid-auto-rows со значениями auto и length

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .box1 {
        grid-area: 1 / 1 / 2 / 2;
      }
      .box2 {
        grid-area: 1 / 2 / 2 / 3;
      }
      .box3 {
        grid-area: 1 / 3 / 2 / 4;
      }
      .box4 {
        grid-area: 2 / 1 / 3 / 2;
      }
      .box5 {
        grid-area: 2 / 2 / 3 / 3;
      }
      .box6 {
        grid-area: 2 / 3 / 3 / 4;
      }
      .auto-box1 {
        grid-area: 1 / 1 / 2 / 2;
      }
      .auto-box2 {
        grid-area: 1 / 2 / 2 / 3;
      }
      .auto-box3 {
        grid-area: 1 / 3 / 2 / 4;
      }
      .auto-box4 {
        grid-area: 2 / 1 / 3 / 2;
      }
      .auto-box5 {
        grid-area: 2 / 2 / 3 / 3;
      }
      .auto-box6 {
        grid-area: 2 / 3 / 3 / 4;
      }
      .grid-container {
        display: grid;
        grid-auto-rows: 100px;
        gap: 10px;
        background-color: #ccc;
        padding: 10px;
      }
      .grid-container > div {
        background-color: #666;
        text-align: center;
        padding: 20px 0;
        font-size: 20px;
      }
      .auto-container {
        display: grid;
        grid-auto-rows: auto;
        gap: 10px;
        background-color: #ccc;
        padding: 10px;
      }
      .auto-container > div {
        background-color: #666;
        text-align: center;
        padding: 20px 0;
        font-size: 20px;
      }
    </style>
  </head>
  <body>
    <h2>Grid-auto-rows property example</h2>
    <h3>100 pixels</h3>
    <div class="grid-container">
      <div class="box1">1</div>
      <div class="box2">2</div>
      <div class="box3">3</div>
      <div class="box4">4</div>
      <div class="box5">5</div>
      <div class="box6">6</div>
    </div>
    <h3>auto</h3>
    <div class="auto-container">
      <div class="auto-box1">1</div>
      <div class="auto-box2">2</div>
      <div class="auto-box3">3</div>
      <div class="auto-box4">4</div>
      <div class="auto-box5">5</div>
      <div class="auto-box6">6</div>
    </div>
  </body>
</html>

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

Результат

Пример свойства grid-auto-rows с несколькими значениями

Пример свойства CSS grid-auto-rows со значениями length, percentage, auto, min-content и max-content

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .box1 {
        grid-area: 1 / 1 / 2 / 2;
      }
      .box2 {
        grid-area: 1 / 2 / 2 / 3;
      }
      .box3 {
        grid-area: 1 / 3 / 2 / 4;
      }
      .box4 {
        grid-area: 2 / 1 / 3 / 2;
      }
      .box5 {
        grid-area: 2 / 2 / 3 / 3;
      }
      .box6 {
        grid-area: 2 / 3 / 3 / 4;
      }
      .grey-box1 {
        grid-area: 1 / 1 / 2 / 2;
      }
      .grey-box2 {
        grid-area: 1 / 2 / 2 / 3;
      }
      .grey-box3 {
        grid-area: 1 / 3 / 2 / 4;
      }
      .grey-box4 {
        grid-area: 2 / 1 / 3 / 2;
      }
      .grey-box5 {
        grid-area: 2 / 2 / 3 / 3;
      }
      .grey-box6 {
        grid-area: 2 / 3 / 3 / 4;
      }
      .auto-box1 {
        grid-area: 1 / 1 / 2 / 2;
      }
      .auto-box2 {
        grid-area: 1 / 2 / 2 / 3;
      }
      .auto-box3 {
        grid-area: 1 / 3 / 2 / 4;
      }
      .auto-box4 {
        grid-area: 2 / 1 / 3 / 2;
      }
      .auto-box5 {
        grid-area: 2 / 2 / 3 / 3;
      }
      .auto-box6 {
        grid-area: 2 / 3 / 3 / 4;
      }
      .min-box1 {
        grid-area: 1 / 1 / 2 / 2;
      }
      .min-box2 {
        grid-area: 1 / 2 / 2 / 3;
      }
      .min-box3 {
        grid-area: 1 / 3 / 2 / 4;
      }
      .min-box4 {
        grid-area: 2 / 1 / 3 / 2;
      }
      .min-box5 {
        grid-area: 2 / 2 / 3 / 3;
      }
      .min-box6 {
        grid-area: 2 / 3 / 3 / 4;
      }
      .max-box1 {
        grid-area: 1 / 1 / 2 / 2;
      }
      .max-box2 {
        grid-area: 1 / 2 / 2 / 3;
      }
      .max-box3 {
        grid-area: 1 / 3 / 2 / 4;
      }
      .max-box4 {
        grid-area: 2 / 1 / 3 / 2;
      }
      .max-box5 {
        grid-area: 2 / 2 / 3 / 3;
      }
      .max-box6 {
        grid-area: 2 / 3 / 3 / 4;
      }
      .grid-container {
        display: grid;
        grid-auto-rows: 150px;
        gap: 10px;
        background-color: #ccc;
        padding: 10px;
      }
      .grid-container > div {
        background-color: #888;
        text-align: center;
        padding: 20px 0;
        font-size: 30px;
      }
      .grey-container {
        display: grid;
        grid-auto-rows: 30%;
        gap: 10px;
        background-color: #ccc;
        padding: 10px;
      }
      .grey-container > div {
        background-color: #888;
        text-align: center;
        padding: 20px 0;
        font-size: 30px;
      }
      .auto-container {
        display: grid;
        grid-auto-rows: auto;
        gap: 10px;
        background-color: #ccc;
        padding: 10px;
      }
      .auto-container > div {
        background-color: #888;
        text-align: center;
        padding: 20px 0;
        font-size: 30px;
      }
      .min-container {
        display: grid;
        grid-auto-rows: min-content;
        gap: 10px;
        background-color: #000;
        padding: 10px;
      }
      .min-container > div {
        background-color: #ccc;
        text-align: center;
        padding: 20px 0;
        font-size: 30px;
      }
      .max-container {
        display: grid;
        grid-auto-rows: max-content;
        gap: 10px;
        background-color: #000;
        padding: 10px;
      }
      .max-container > div {
        background-color: #ccc;
        text-align: center;
        padding: 20px 0;
        font-size: 30px;
      }
    </style>
  </head>
  <body>
    <h2>Grid-auto-rows property example</h2>
    <p>Use the <strong>grid-auto-rows</strong> property to set a default size (height) for all rows.</p>
    <h3>150 pixels</h3>
    <div class="grid-container">
      <div class="box1">1</div>
      <div class="box2">2</div>
      <div class="box3">3</div>
      <div class="box4">4</div>
      <div class="box5">5</div>
      <div class="box6">6</div>
    </div>
    <h3>30%</h3>
    <div class="grey-container">
      <div class="grey-box1">1</div>
      <div class="grey-box2">2</div>
      <div class="grey-box3">3</div>
      <div class="grey-box4">4</div>
      <div class="grey-box5">5</div>
      <div class="grey-box6">6</div>
    </div>
    <h3>auto</h3>
    <div class="auto-container">
      <div class="auto-box1">1</div>
      <div class="auto-box2">2</div>
      <div class="auto-box3">3</div>
      <div class="auto-box4">4</div>
      <div class="auto-box5">5</div>
      <div class="auto-box6">6</div>
    </div>
    <h3>min-content</h3>
    <div class="min-container">
      <div class="min-box1">1</div>
      <div class="min-box2">2</div>
      <div class="min-box3">3</div>
      <div class="min-box4">4</div>
      <div class="min-box5">5</div>
      <div class="min-box6">6</div>
    </div>
    <h3>max-content</h3>
    <div class="max-container">
      <div class="max-box1">1</div>
      <div class="max-box2">2</div>
      <div class="max-box3">3</div>
      <div class="max-box4">4</div>
      <div class="max-box5">5</div>
      <div class="max-box6">6</div>
    </div>
  </body>
</html>

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

Пример свойства grid-auto-rows со значением "minmax"

Пример свойства grid-auto-rows со значением minmax()

Функция minmax(min, max) задаёт гибкую высоту каждой неявной строке: она никогда не уменьшается ниже min и никогда не превышает max. В данном примере каждая автоматическая строка имеет высоту не менее 90px и не более 4cm.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .box1 {
        grid-area: 1 / 1 / 2 / 2;
      }
      .box2 {
        grid-area: 1 / 2 / 2 / 3;
      }
      .box3 {
        grid-area: 1 / 3 / 2 / 4;
      }
      .box4 {
        grid-area: 2 / 1 / 3 / 2;
      }
      .box5 {
        grid-area: 2 / 2 / 3 / 3;
      }
      .box6 {
        grid-area: 2 / 3 / 3 / 4;
      }
      .minmax1 {
        grid-area: 1 / 1 / 2 / 2;
      }
      .minmax2 {
        grid-area: 1 / 2 / 2 / 3;
      }
      .minmax3 {
        grid-area: 1 / 3 / 2 / 4;
      }
      .minmax4 {
        grid-area: 2 / 1 / 3 / 2;
      }
      .minmax5 {
        grid-area: 2 / 2 / 3 / 3;
      }
      .minmax6 {
        grid-area: 2 / 3 / 3 / 4;
      }
      .grid-container {
        display: grid;
        grid-auto-rows: 100px;
        gap: 10px;
        background-color: #ccc;
        padding: 10px;
      }
      .grid-container > div {
        background-color: #666;
        text-align: center;
        padding: 20px 0;
        font-size: 20px;
      }
      .minmax-container {
        display: grid;
        grid-auto-rows: minmax(90px, 4cm);
        gap: 10px;
        background-color: #cccccc;
        padding: 10px;
      }
      .minmax-container > div {
        background-color: #f5f5f5;
        text-align: center;
        padding: 20px 0;
        font-size: 20px;
      }
    </style>
  </head>
  <body>
    <h2>Grid-auto-rows property example</h2>
    <h3>100 pixels</h3>
    <div class="grid-container">
      <div class="box1">1</div>
      <div class="box2">2</div>
      <div class="box3">3</div>
      <div class="box4">4</div>
      <div class="box5">5</div>
      <div class="box6">6</div>
    </div>
    <h3>minmax</h3>
    <div class="minmax-container">
      <div class="minmax1">1</div>
      <div class="minmax2">2</div>
      <div class="minmax3">3</div>
      <div class="minmax4">4</div>
      <div class="minmax5">5</div>
      <div class="minmax6">6</div>
    </div>
  </body>
</html>

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

Здесь grid-auto-rows задаёт высоту по умолчанию для каждой неявной строки, а minmax() делает эту высоту гибкой в пределах нижней и верхней границ.

Значения

Значение	Описание	Попробовать
auto	Размер каждой строки определяется её содержимым. Это значение по умолчанию для данного свойства.	Попробовать »
max-content	Размер каждой строки определяется наибольшим элементом в строке.	Попробовать »
min-content	Размер каждой строки определяется наименьшим элементом в строке.	Попробовать »
minmax(min, max)	Диапазон размера: не менее «min» и не более «max».	Попробовать »
`<length>`	Размер строк задаётся значением длины.	Попробовать »
`<percentage>`	Размер строк задаётся в процентах.	Попробовать »
`<flex>`	Неотрицательный размер с единицей «fr», задающий коэффициент гибкости трека. Каждый трек с размером `<flex>` занимает часть оставшегося пространства пропорционально своему коэффициенту.
initial	Устанавливает для свойства значение по умолчанию.
inherit	Наследует свойство от родительского элемента.

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

grid-template-rows — задаёт размеры явных строк; grid-auto-rows задаёт размеры только строк, создаваемых сверх них.
grid-auto-columns — аналог для столбцов: задаёт размеры неявных столбцов.
grid-auto-flow — управляет тем, размещает ли сетка элементы автоматически в новых строках или в новых столбцах.
grid — сокращённое свойство, позволяющее задать все вышеуказанные свойства одновременно.

Практика

Какова функция свойства 'grid-auto-rows' в CSS Grid Layout?

Оно задаёт размер автоматически создаваемых строк сетки.Оно определяет цвет строк сетки.Оно регулирует расположение строк сетки на экране.Оно влияет на алгоритм автоматического размещения применительно только к строкам сетки.