grid-template-rows

В процессе перевода.

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

/* 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 .
<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> ] )
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> )
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 | <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> ] )
<track-repeat> = repeat( [ <positive-integer> ] , [ <line-names>? <track-size> ]+ <line-names>? )
<fixed-size> = <fixed-breadth> | minmax( <fixed-breadth> , <track-breadth> ) | minmax( <inflexible-breadth> , <fixed-breadth> )
<fixed-repeat> = repeat( [ <positive-integer> ] , [ <line-names>? <fixed-size> ]+ <line-names>? )
<auto-repeat> = repeat( [ auto-fill | auto-fit ] , [ <line-names>? <fixed-size> ]+ <line-names>? )

где
<track-breadth> = <length-percentage> | <flex> | min-content | max-content | auto
<inflexible-breadth> = <length> | <percentage> | min-content | max-content | auto
<fixed-breadth> = <length-percentage>

где
<length-percentage> = <length> | <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

Update compatibility data on GitHub
КомпьютерыМобильные
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome для AndroidFirefox для AndroidOpera для AndroidSafari on iOSSamsung Internet
grid-template-rowsChrome Полная поддержка 57
Полная поддержка 57
Полная поддержка 29
Отключено
Отключено From version 29: this feature is behind the Enable experimental Web Platform features preference. To change preferences in Chrome, visit chrome://flags.
Edge Полная поддержка 16Firefox Полная поддержка 52
Полная поддержка 52
Нет поддержки 40 — 59
Отключено
Отключено From version 40 until version 59 (exclusive): this feature is behind the layout.css.grid.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE Нет поддержки НетOpera Полная поддержка 44
Полная поддержка 44
Полная поддержка 28
Отключено
Отключено From version 28: this feature is behind the Enable experimental Web Platform features preference.
Safari Полная поддержка 10.1WebView Android Полная поддержка 57Chrome Android Полная поддержка 57
Полная поддержка 57
Полная поддержка 29
Отключено
Отключено From version 29: this feature is behind the Enable experimental Web Platform features preference. To change preferences in Chrome, visit chrome://flags.
Firefox Android Полная поддержка 52
Полная поддержка 52
Нет поддержки 40 — 59
Отключено
Отключено From version 40 until version 59 (exclusive): this feature is behind the layout.css.grid.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android Полная поддержка 43
Полная поддержка 43
Полная поддержка 28
Отключено
Отключено From version 28: this feature is behind the Enable experimental Web Platform features preference.
Safari iOS Полная поддержка 10.3Samsung Internet Android Полная поддержка 6.0
Animation of tracksChrome Нет поддержки НетEdge Нет поддержки НетFirefox Полная поддержка 66IE Нет поддержки НетOpera Нет поддержки НетSafari Нет поддержки НетWebView Android Нет поддержки НетChrome Android Нет поддержки НетFirefox Android Полная поддержка 66Opera Android Нет поддержки НетSafari iOS Нет поддержки НетSamsung Internet Android Нет поддержки Нет
fit-content()Chrome Полная поддержка 29Edge Полная поддержка 16Firefox Полная поддержка 51IE Нет поддержки НетOpera Полная поддержка 44Safari Полная поддержка 10.1WebView Android Полная поддержка 57Chrome Android Полная поддержка 57Firefox Android Полная поддержка 51Opera Android Полная поддержка 43Safari iOS Полная поддержка 10.3Samsung Internet Android Полная поддержка 6.0
minmax()Chrome Полная поддержка 57
Полная поддержка 57
Полная поддержка 29
Отключено
Отключено From version 29: this feature is behind the Enable experimental Web Platform features preference. To change preferences in Chrome, visit chrome://flags.
Edge Полная поддержка 16Firefox Полная поддержка 52
Полная поддержка 52
Нет поддержки 40 — 59
Отключено
Отключено From version 40 until version 59 (exclusive): this feature is behind the layout.css.grid.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE Нет поддержки НетOpera Полная поддержка 44
Полная поддержка 44
Полная поддержка 28
Отключено
Отключено From version 28: this feature is behind the Enable experimental Web Platform features preference.
Safari Полная поддержка 10.1WebView Android Полная поддержка 57Chrome Android Полная поддержка 57
Полная поддержка 57
Полная поддержка 29
Отключено
Отключено From version 29: this feature is behind the Enable experimental Web Platform features preference. To change preferences in Chrome, visit chrome://flags.
Firefox Android Полная поддержка 52
Полная поддержка 52
Нет поддержки 40 — 59
Отключено
Отключено From version 40 until version 59 (exclusive): this feature is behind the layout.css.grid.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android Полная поддержка 43
Полная поддержка 43
Полная поддержка 28
Отключено
Отключено From version 28: this feature is behind the Enable experimental Web Platform features preference.
Safari iOS Полная поддержка 10.3Samsung Internet Android Полная поддержка 6.0
repeat()Chrome Полная поддержка 57
Полная поддержка 57
Полная поддержка 38
Отключено
Отключено From version 38: this feature is behind the Enable experimental Web Platform features preference. To change preferences in Chrome, visit chrome://flags.
Edge Полная поддержка 16Firefox Частичная поддержка 57
Замечания
Частичная поддержка 57
Замечания
Замечания repeat(auto-fill, ...) and repeat(auto-fit, ...) only support one repeated column (see bug 1341507).
Нет поддержки 52 — 57
Замечания
Замечания calc() doesn't work in repeat() (see bug 1350069).
Нет поддержки 40 — 59
Отключено
Отключено From version 40 until version 59 (exclusive): this feature is behind the layout.css.grid.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE Нет поддержки НетOpera Полная поддержка 44
Полная поддержка 44
Полная поддержка 28
Отключено
Отключено From version 28: this feature is behind the Enable experimental Web Platform features preference.
Safari Полная поддержка 10.1WebView Android Полная поддержка 57Chrome Android Полная поддержка 57
Полная поддержка 57
Полная поддержка 38
Отключено
Отключено From version 38: this feature is behind the Enable experimental Web Platform features preference. To change preferences in Chrome, visit chrome://flags.
Firefox Android Полная поддержка 52
Полная поддержка 52
Нет поддержки 40 — 59
Отключено
Отключено From version 40 until version 59 (exclusive): this feature is behind the layout.css.grid.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android Полная поддержка 43
Полная поддержка 43
Полная поддержка 28
Отключено
Отключено From version 28: this feature is behind the Enable experimental Web Platform features preference.
Safari iOS Полная поддержка 10.3Samsung Internet Android Полная поддержка 6.0
subgridChrome Нет поддержки НетEdge Нет поддержки НетFirefox Полная поддержка 71
Полная поддержка 71
Полная поддержка 69
Замечания Отключено
Замечания Enabled by default in Firefox Nightly.
Отключено From version 69: this feature is behind the layout.css.grid-template-subgrid-value.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE Нет поддержки НетOpera Нет поддержки НетSafari Нет поддержки НетWebView Android Нет поддержки НетChrome Android Нет поддержки НетFirefox Android Нет поддержки НетOpera Android Нет поддержки НетSafari iOS Нет поддержки НетSamsung Internet Android Нет поддержки Нет

Легенда

Полная поддержка  
Полная поддержка
Частичная поддержка  
Частичная поддержка
Нет поддержки  
Нет поддержки
Смотрите замечания реализации.
Смотрите замечания реализации.
Пользователь должен сам включить эту возможность.
Пользователь должен сам включить эту возможность.

See also