grid-template-rows

grid-template-rows — этоCSS свойство,  которое определяет названия линий и путь размера функции  grid rows (en-US).

/* Keyword value */
grid-template-rows: none;

/* <track-list> values */
grid-template-rows: 100px 1fr;
grid-template-rows: [linename] 100px;
grid-template-rows: [linename1] 100px [linename2 linename3];
grid-template-rows: minmax(100px, 1fr);
grid-template-rows: fit-content(40%);
grid-template-rows: repeat(3, 200px);

/* <auto-track-list> values */
grid-template-rows: 200px repeat(auto-fill, 100px) 300px;
grid-template-rows: minmax(100px, max-content)
                       repeat(auto-fill, 200px) 20%;
grid-template-rows: [linename1] 100px [linename2]
                       repeat(auto-fit, [linename3 linename4] 300px)
                       100px;
grid-template-rows: [linename1 linename2] 100px
                       repeat(auto-fit, [linename1] 300px) [linename3];

/* Global values */
grid-template-rows: inherit;
grid-template-rows: initial;
grid-template-rows: unset;

Это свойство может быть указано как:

• либо с помощью ключевого слова: none
• или значением <track-list> ,
• или значением <auto-track-list> .

none

Ключевое слово, обозначающее, что явной сетки нет. Любые строки будут сгенерированны неявно, а их размер будет определяться свойством: grid-auto-rows (en-US) .

<length>

Неотрицательное значение размера.

<percentage>

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

<flex>
Is a non-negative dimension with the unit fr specifying the track’s flex factor. Each <flex>-sized track takes a share of the remaining space in proportion to its flex factor. When appearing outside a minmax() notation, it implies an automatic minimum (i.e. minmax(auto, <flex>)).

max-content

Is a keyword representing the largest maximal content contribution of the grid items occupying the grid track.

min-content

Is a keyword representing the largest minimal content contribution of the grid items occupying the grid track.

minmax(min, max)

Это CSS функция, определяющая диапазон размеров, который больше или равен min и меньше или равен max. Если max меньше чем min, то max игнорируется и функция обрабатывается как min. As a maximum, a <flex> value sets the track’s flex factor. It is invalid as a minimum.

auto

Is a keyword that is identical to maximal content if it's a maximum. As a minimum it represents the largest minimum size (as specified by min-width/min-height) of the grid items occupying the grid track.

Note: auto track sizes (and only auto track sizes) can be stretched by the align-content and justify-content properties.

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

Represents the formula min(max-content, max(auto, argument)), which is calculated similar to auto (i.e. minmax(auto, max-content)), except that the track size is clamped at argument if it is greater than the auto minimum.

repeat( [ <positive-integer> | auto-fill | auto-fit ] , <track-list> ) (en-US)

Represents a repeated fragment of the track list, allowing a large number of rows that exhibit a recurring pattern to be written in a more compact form.

none | (en-US) <track-list> | (en-US) <auto-track-list> | (en-US) subgrid <line-name-list>? (en-US)
где 
<track-list> = [ (en-US) <line-names>? (en-US) [ (en-US) <track-size> | (en-US) <track-repeat> ] (en-US) ] (en-US)+ (en-US) <line-names>? (en-US)
<auto-track-list> = [ (en-US) <line-names>? (en-US) [ (en-US) <fixed-size> | (en-US) <fixed-repeat> ] (en-US) ] (en-US)* (en-US) <line-names>? (en-US) <auto-repeat>
[ (en-US) <line-names>? (en-US) [ (en-US) <fixed-size> | (en-US) <fixed-repeat> ] (en-US) ] (en-US)* (en-US) <line-names>? (en-US)
<line-name-list> = [ (en-US) <line-names> | (en-US) <name-repeat> ] (en-US)+ (en-US)
где 
<line-names> = '[ (en-US)' <custom-ident>* (en-US) '] (en-US)'
<track-size> = <track-breadth> | (en-US) minmax( <inflexible-breadth> , <track-breadth> ) | (en-US) fit-content( [ (en-US) <length> | (en-US) <percentage> ] (en-US) )
<track-repeat> = repeat( [ (en-US) [1,∞] (en-US)> ] (en-US) , [ (en-US) <line-names>? (en-US) <track-size> ] (en-US)+ (en-US) <line-names>? (en-US) )
<fixed-size> = <fixed-breadth> | (en-US) minmax( <fixed-breadth> , <track-breadth> ) | (en-US) minmax( <inflexible-breadth> , <fixed-breadth> )
<fixed-repeat> = repeat( [ (en-US) [1,∞] (en-US)> ] (en-US) , [ (en-US) <line-names>? (en-US) <fixed-size> ] (en-US)+ (en-US) <line-names>? (en-US) )
<auto-repeat> = repeat( [ (en-US) auto-fill | (en-US) auto-fit ] (en-US) , [ (en-US) <line-names>? (en-US) <fixed-size> ] (en-US)+ (en-US) <line-names>? (en-US) )
где 
<track-breadth> = <length-percentage> | (en-US) <flex> | (en-US) min-content | (en-US) max-content | (en-US) auto
<inflexible-breadth> = <length> | (en-US) <percentage> | (en-US) min-content | (en-US) max-content | (en-US) auto
<fixed-breadth> = <length-percentage>
где 
<length-percentage> = <length> | (en-US) <percentage>

#grid {
  display: grid;
  height: 100px;
  grid-template-rows: 30px 1fr;
}

#areaA {
  background-color: lime;
}

#areaB {
  background-color: yellow;
}

<div id="grid">
  <div id="areaA">A</div>
  <div id="areaB">B</div>
</div>

• Related CSS properties: grid-template-columns, grid-template-areas, grid-template (en-US)
• Grid Layout Guide: Basic concepts of grid layout - Grid Tracks
• Video tutorial: Defining a Grid