网格模板行 | grid-template-rows

grid-template-rows

grid-template-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

或者是<track-list>

或者<auto-track-list>

取值

none是一个关键字，没有明确的网格。任何行都将隐式生成，其大小将由grid-auto-rows属性确定。

轨道的固有尺寸贡献可以根据网格容器的尺寸进行调整，并且以最小的数量增加轨道的最终尺寸，从而达到百分比。<flex>是单位fr指定曲目的弹性系数的非负值尺寸。每条<flex>曲线都按照弹性系数的比例分摊余下的空间。当出现在minmax()符号之外时，它意味着自动最小（即minmax(auto, <flex>)）。max-content是表示占据网格轨道的网格项目的最大最大内容贡献的关键字。min-content是一个关键字，表示网格项目占用网格轨道的最小内容贡献。minmax(min, max)是一个函数表示法，它定义了一个大小范围，大于或等于min，小于或等于max。如果max小于min，则max被忽略，函数被视为min。作为最大值，一个<flex>值设置曲目的弹性因子。这至少是无效的。auto如果最大值是最大内容，则该关键字是相同的。至少它表示占据网格轨道的网格项目的最大最小尺寸（由min-width/ 指定min-height）。

注意：auto轨道尺寸（只有auto轨道尺寸）可以通过align-content和justify-content属性拉伸。

fit-content( [ <length> | <percentage> ] )表示公式min(max-content, max(auto, argument))，其计算方法类似于auto（ie minmax(auto, max-content)），只是如果轨道大小大于auto最小值，则轨道大小被夹在参数中。repeat( [ <positive-integer> | auto-fill | auto-fit ] , <track-list> )表示轨道列表的重复片段，允许大量显示重复模式的行以更紧凑的形式写入。

形式语法

none | <track-list> | <auto-track-list>where 
<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>?
where 
<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>? )
where 
<track-breadth> = <length-percentage> | <flex> | min-content | max-content | auto
<inflexible-breadth> = <length> | <percentage> | min-content | max-content | auto
<fixed-breadth> = <length-percentage>

where 
<length-percentage> = <length> | <percentage>

实例

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>

结果

规范

Specification	Status	Comment
CSS Grid LayoutThe definition of 'grid-template-rows' in that specification.	Candidate Recommendation	Initial definition

浏览器兼容性

Feature	Chrome	Edge	Firefox (Gecko)	Internet Explorer	Opera	Safari
Basic support	571	20 (12.10240)-ms3	52.0 (52.0)2	10.0-ms3	444	10.1

Feature	Android Webview	Chrome for Android	Firefox Mobile (Gecko)	IE Mobile	Opera Mobile	Safari Mobile
Basic support	571	571	52.0 (52.0)2	10.0-ms3	44	No support