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 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 |
Синтаксис
Это свойство может быть указано как:
- либо с помощью ключегого слова:
none
- или значением
<track-list>
, - или значением
<auto-track-list>
.
Значения
none
- Ключевое слово, обозначающее, что явной сетки нет. Любые строки будут сгенерированны неявно, а их размер будет определяться свойством:
grid-auto-rows
. <length>
- Неотрицательное значение размера.
<percentage>
- Неотрицательное значение
<percentage>
, относительно размера блока сетки контейнера. Если размер сетки контейнера зависит от размера его пути, то процент должен рассматриваться какauto
. Собственный размер вкладов пути может быть скорректирован в соответствии с размером сетки контейнера и увеличить конечный размер пути на минимальную величину, которая привела бы к учету процента.
<flex>
Is a non-negative dimension with the unitfr
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 aminmax()
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 onlyauto
track sizes) can be stretched by thealign-content
andjustify-content
properties. fit-content( [ <length> | <percentage> ] )
- Represents the formula
min(max-content, max(auto, argument))
, which is calculated similar toauto
(i.e.minmax(auto, max-content)
), except that the track size is clamped at argument if it is greater than theauto
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
BCD tables only load in the browser
See also
- Related CSS properties:
grid-template-columns
,grid-template-areas
,grid-template
- Grid Layout Guide: Basic concepts of grid layout - Grid Tracks
- Video tutorial: Defining a Grid