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

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

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

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

Несколько размеров образуют повторяющийся шаблон. После явной сетки он повторяется вперёд; перед ней — назад от последнего значения. Например, 60px 100px чередует два размера.

Свойство задаёт размеры дорожек, но не направление заполнения. За него отвечает grid-auto-flow.

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

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

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

<div class="stage demo-target">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
</div>

* {
  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;
}
.demo-target {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  grid-auto-rows: 40px;
}

* {
  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;
}
.demo-target {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  grid-auto-rows: 80px;
}

* {
  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;
}
.demo-target {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  grid-auto-rows: minmax(40px, auto);
}

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

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

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

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

Показать браузеры

ВсеКомпьютерыМобильные

Совместимостьcss.properties.grid-auto-rows

Возможность	Компьютеры					Мобильные
	ChromeChrome	EdgeEdge	FirefoxFirefox	OperaOpera	SafariSafari	Chrome AndroidChromeAndroid	Firefox for AndroidFirefoxAndroid	Opera AndroidOperaAndroid	Safari on iOSSafariiOS	Samsung BrowserSamsungAndroid	WebView AndroidWebViewAndroid	WebView on iOSWebViewiOS
grid-auto-rows	✓57	✓16…	✓70…	✓44	✓10.1	✓57	✓79…	✓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
max-content	✓57	✓16	✓52	✓44	✓11	✓57	✓52	✓43	✓11	✓7.0	✓57	✓11
min-content	✓57	✓16	✓52	✓44	✓11	✓57	✓52	✓43	✓11	✓7.0	✓57	✓11
Ещё 3 значений · ✓ поддерживаются везде более 3 летСвернуть

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

Синтаксис

grid-auto-rows: <track-size>+;

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

| разделяет варианты. + означает одно или несколько повторений. Типы в угловых скобках обозначают допустимые значения из таблицы или соответствующих составляющих.

JavaScript:

element.style.gridAutoRows = "100px";

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

auto.

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

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

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

Наследуется

Нет.

Анимируемое

Как список размеров при совместимой структуре; иначе дискретно.

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

Дорожки и промежутки Grid

Измените 70px на 100px. Высота автоматически созданных строк изменится.

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>Дорожки и промежутки Grid</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(2, 1fr);
    grid-auto-rows: 70px;
}