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
Применяется ксеточные контейнеры
Наследуетсянет
Процентыотносятся к соответвующему размеру области содержимого
Обработка значениякак указано, но с относительной длиной, конвертируемой в абсолютные длины
Animation typesimple list of length, percentage, or calc, provided the only differences are in the values of the length, percentage, or calc components in the list

Синтаксис

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

  • либо с помощью ключевого слова: 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.

Formal syntax

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>

Examples

CSS

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

#areaA {
  background-color: lime;
}

#areaB {
  background-color: yellow;
}

HTML

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

Result

Specifications

Specification Status Comment
CSS Grid Layout
Определение 'grid-template-rows' в этой спецификации.
Кандидат в рекомендации Initial definition

Browser compatibility

BCD tables only load in the browser

See also