grid-template-rows

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

/* <track-list> values */
grid-template-rows: 100px 1fr;
grid-template-rows: [line-name] 100px;
grid-template-rows: [line-name1] 100px [line-name2 line-name3];
grid-template-rows: minmax(100px, 1fr);
grid-template-rows: fit-content(40%);
grid-template-rows: repeat(3, 200px);
grid-template-rows: subgrid;
grid-template-rows: masonry;

/* <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:
  [line-name1] 100px [line-name2]
  repeat(auto-fit, [line-name3 line-name4] 300px)
  100px;
grid-template-rows:
  [line-name1 line-name2] 100px
  repeat(auto-fit, [line-name1] 300px) [line-name3];

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

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

• либо ключевое значение none
• либо значение <track-list>
• или значение <auto-track-list>.

none

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

[line-name]

<custom-ident>, определяющий имя линии в этом месте. Идентификатор может быть любой допустимой строкой, кроме зарезервированных слов span и auto. Линии могут иметь несколько имён, разделённых пробелом внутри квадратных скобок, например, [line-name-a line-name-b].

<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> задаёт множитель гибкости полосы. Оно недопустимо в качестве минимума.

auto

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

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

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

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

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

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

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

Представляет повторяющийся фрагмент списка полос, позволяющий компактнее записать большое количество строк, обладающих повторяющимся шаблоном.

masonry

Значение masonry указывает, что эта ось должна быть выложена в соответствии с алгоритмом masonry.

subgrid

Значение subgrid указывает, что сетка примет охватываемую часть родительской сетки по этой оси. Вместо явного указания размеры строк/столбцов сетки будут взяты из определения родительской сетки.

grid-template-rows = 
  none                       |
  <track-list>               |
  <auto-track-list>          |
  subgrid <line-name-list>?  

<track-list> = 
  [ <line-names>? [ <track-size> | <track-repeat> ] ]+ <line-names>?  

<auto-track-list> = 
  [ <line-names>? [ <fixed-size> | <fixed-repeat> ] ]* <line-names>? <auto-repeat> [ <line-names>? [ <fixed-size> | <fixed-repeat> ] ]* <line-names>?  

<line-name-list> = 
  [ <line-names> | <name-repeat> ]+  

<line-names> = 
  '[' <custom-ident>* ']'  

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

<track-repeat> = 
  repeat( [ <integer [1,∞]> ] , [ <line-names>? <track-size> ]+ <line-names>? )  

<fixed-size> = 
  <fixed-breadth>                                   |
  minmax( <fixed-breadth> , <track-breadth> )       |
  minmax( <inflexible-breadth> , <fixed-breadth> )  

<fixed-repeat> = 
  repeat( [ <integer [1,∞]> ] , [ <line-names>? <fixed-size> ]+ <line-names>? )  

<auto-repeat> = 
  repeat( [ auto-fill | auto-fit ] , [ <line-names>? <fixed-size> ]+ <line-names>? )  

<name-repeat> = 
  repeat( [ <integer [1,∞]> | auto-fill ] , <line-names>+ )  

<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>  

<fixed-breadth> = 
  <length-percentage [0,∞]>  

HTML

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

CSS

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

#areaA {
  background-color: lime;
}

#areaB {
  background-color: yellow;
}

Результат

• grid-template-columns
• grid-template-areas
• grid-template
• Основные понятия макета сетки: дорожки сетки
• Видео: Определение сетки
• Подсетка