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 July 2020.

* Learn more
* See full compatibility
* Report feedback
CSS-свойство **`grid-template-rows`** определяет имена линий и размеры полос грид-рядов (en-US).

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

Синтаксис
---------


```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` (en-US).

`[linename]`

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

`<length>`

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

`<percentage>`

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


`<flex>`

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

`max-content` (en-US)

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

`min-content` (en-US)

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

`minmax(min, max)`

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

`auto`

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

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

При использовании `auto` в `minmax()`, диапазон минимальных и максимальных значений вычисляется по описанному выше принципу. В большинстве случаев это то же самое, что написать `minmax(min-content,max-content)`.

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

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

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

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

Позволяет в краткой форме создать список рядов с определённым количеством и размером.

`masonry` (en-US)
Экспериментальная возможность

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

`subgrid`

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


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

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

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

|  |  |
| --- | --- |
| Начальное значение | `none` |
| Применяется к | сеточные контейнеры |
| Наследуется | нет |
| Проценты | относятся к соответствующему размеру области содержимого |
| Обработка значения | как указано, но с относительной длиной, конвертируемой в абсолютные длины |
| Animation type | simple 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                       | (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> =   
  '[' <custom-ident>\* (en-US) ']'    
  
<track-size> =   
  <track-breadth>                                   | (en-US)  
  minmax( <inflexible-breadth> , <track-breadth> )  | (en-US)  
  fit-content( <length-percentage [0,∞]> )            
  
<track-repeat> =   
  repeat( [ (en-US) <integer [1,∞]> ] (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) <integer [1,∞]> ] (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) )    
  
<name-repeat> =   
  repeat( [ (en-US) <integer [1,∞]> | (en-US) auto-fill ] (en-US) , <line-names>+ (en-US) )    
  
<track-breadth> =   
  <length-percentage [0,∞]>  | (en-US)  
  <flex [0,∞]>               | (en-US)  
  min-content                | (en-US)  
  max-content                | (en-US)  
  auto                         
  
<inflexible-breadth> =   
  <length-percentage [0,∞]>  | (en-US)  
  min-content                | (en-US)  
  max-content                | (en-US)  
  auto                         
  
<length-percentage> =   
  <length>      | (en-US)  
  <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 |
| CSS Grid Layout Module Level 3 # masonry-layout |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

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

* Связанные CSS-свойства: `grid-template-columns`, `grid-template-areas`, `grid-template`
* Руководство по грид-раскладке: *Основы грид-раскладки - грид-полосы*
* Обучающее видео: *Defining a Grid*
* Сабгрид