grid-template-rows

Baseline Widely available *

This feature is well established and works across many devices and browser versions. It’s been available across browsers since October 2017.

* Some parts of this feature may have varying levels of support.

CSS-свойство grid-template-rows определяет имена линий и размеры полос грид-рядов.

Интерактивный пример

Синтаксис

css
/* Ключевые слова */
grid-template-rows: none;

/* Значения <track-list> */
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);
grid-template-rows: subgrid;
grid-template-rows: masonry;

/* Значения <auto-track-list> */
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];

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

Это свойство может быть задано следующими способами:

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

Значения

none

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

[linename]

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

<length>

Положительное значение типа length.

<percentage>

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

<flex>

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

max-content

Ключевое слово, представляющее наибольший максимальный размер содержимого грид-элементов в грид-полосе.

min-content

Ключевое слово, представляющее наибольший минимальный размер содержимого грид-элементов в грид-полосе.

minmax(min, max)

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

auto

Для каждого из рядов автоматически вычисляется размер на основе содержимого. Самый большой размер ряда соответствует max-content.

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

При использовании auto в minmax(), диапазон минимальных и максимальных значений вычисляется по описанному выше принципу. В большинстве случаев это то же самое, что написать 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 указывает на то, что грид примет составную часть родительского грида по данной оси. Поскольку размеры рядов/колонок не указываются явно, они берутся из определения родительского грида.

Предупреждение: Значение masonry появилось в спецификации Grid третьего уровня и на данный момент реализовано в качестве эксперимента и доступно по флагу в Firefox.

Значение subgrid определено в спецификации Grid второго уровня и на данный момент реализовано только в Firefox с версии 71.

Формальное определение

Начальное значение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

Формальный синтаксис

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

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

CSS

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

#areaA {
  background-color: lime;
}

#areaB {
  background-color: yellow;
}

Результат

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

Specification
CSS Grid Layout Module Level 2
# track-sizing
CSS Grid Layout Module Level 2
# subgrids

Совместимость с браузерами

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
grid-template-rows
Animation of tracks
auto
fit-content()
masonry
Experimental
max-content
min-content
minmax()
none
repeat()
subgrid

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
Partial support
Partial support
In development. Supported in a pre-release version.
In development. Supported in a pre-release version.
No support
No support
Experimental. Expect behavior to change in the future.
See implementation notes.
User must explicitly enable this feature.
Uses a non-standard name.
Has more compatibility info.

Смотрите также