grid-auto-rows

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

<length>

Представляет собой неотрицательную длину.

<percentage>

Представляет собой неотрицательное значение <percentage>, относительное к размеру области блока контейнера сетки. Если размер области блока контейнера сетки неопределён, значение процента обрабатывается как auto.

<flex>

Представляет собой неотрицательную размерность с единицей fr, задающей коэффициент растяжения дорожки. Каждая дорожка, размер которой указан как <flex> , занимает долю оставшегося пространства пропорционально своему коэффициенту растяжения.

При использовании вне обозначения minmax() подразумевает автоматический минимум (т.е. minmax(auto, <flex>)).

max-content

Это ключевое слово, представляющее максимальное вклад в размер сетки элементов, занимающих дорожку сетки.

min-content

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

minmax(min, max)

Функциональное обозначение, определяющее диапазон размеров, не меньший, чем min, и не больший, чем max. Если max меньше min, то max игнорируется, и функция обрабатывается как min. В качестве максимума значение <flex> задаёт коэффициент растяжения дорожки. В качестве минимума оно обрабатывается как ноль (или как минимальное содержимое, если размер контейнера сетки ограничен минимальным размером содержимого).

fit-content( [ <length> | <percentage> ] )

Представляет формулу min(max-content, max(auto, argument)), которая вычисляется аналогично auto (т.е. minmax(auto, max-content)), за исключением того, что размер дорожки ограничен значением argument, если он больше минимального значения auto.

auto

В качестве максимума представляет собой максимальный размер max-content элементов в данной дорожке.

В качестве минимума представляет собой максимальный минимальный размер элементов в данной дорожке (заданный min-width/min-height элементов). Часто, но не всегда, это размер min-content.

Если используется вне обозначения minmax(), auto представляет собой диапазон между минимальным и максимальным значениями, описанными выше. В большинстве случаев он ведет себя аналогично minmax(min-content,max-content).

Примечание: размеры дорожек, заданные как auto (и только размеры дорожек auto ) могут быть растянуты свойствами align-content и justify-content. Поэтому по умолчанию дорожка размера auto займёт всё оставшееся пространство в контейнере сетки.

grid-auto-rows = 
  <track-size>+  

<track-size> = 
  <track-breadth>                                   |
  minmax( <inflexible-breadth> , <track-breadth> )  |
  fit-content( <length-percentage [0,∞]> )          

<track-breadth> = 
  <length-percentage [0,∞]>  |
  <flex [0,∞]>               |
  min-content                |
  max-content                |
  auto                       

<inflexible-breadth> = 
  <length-percentage [0,∞]>  |
  min-content                |
  max-content                |
  auto                       

<length-percentage> = 
  <length>      |
  <percentage>  

HTML

<div id="grid">
  <div id="item1"></div>
  <div id="item2"></div>
  <div id="item3"></div>
</div>

CSS

#grid {
  width: 200px;
  display: grid;
  grid-template-areas: "a a";
  gap: 10px;
  grid-auto-rows: 100px;
}

#grid > div {
  background-color: lime;
}

Результат

• grid-auto-columns
• grid-auto-flow
• grid
• Автоматическое размещение в сетке — установка размеров строк в неявной сетке
• Видео: Знакомство с автоматическим размещением и порядком в сетке