网格自动行 | grid-auto-rows

grid-auto-rows

grid-auto-rows属性指定隐式创建的网格行跟踪的大小。

/* Keyword values */
grid-auto-rows: min-content;
grid-auto-rows: max-content;
grid-auto-rows: auto;

/* <length> values */
grid-auto-rows: 100px;
grid-auto-rows: 20cm;
grid-auto-rows: 50vmax;

/* <percentage> values */
grid-auto-rows: 10%;
grid-auto-rows: 33.3%;

/* <flex> values */
grid-auto-rows: 0.5fr;
grid-auto-rows: 3fr;

/* minmax() values */
grid-auto-rows: minmax(100px, auto
grid-auto-rows: minmax(max-content, 2fr
grid-auto-rows: minmax(20%, 80vmax

/* multiple track-size values */
grid-auto-rows: min-content max-content auto;
grid-auto-rows: 100px 150px 390px;
grid-auto-rows: 10% 33.3%;
grid-auto-rows: 0.5fr 3fr 1fr;
grid-auto-rows: minmax(100px, auto) minmax(max-content, 2fr) minmax(20%, 80vmax
grid-auto-rows: 100px minmax(100px, auto) 10% 0.5fr fit-content(400px

/* Global values */
grid-auto-rows: inherit;
grid-auto-rows: initial;
grid-auto-rows: unset;

如果网格项定位在未显式调整大小的行中，则grid-template-rows，隐式格网轨道是用来支撑它的。这可以通过显式定位到超出范围的行，或者通过自动布局算法创建额外的行来实现。

初始值	auto
应用于	grid containers
是否继承	no
百分比	refer to corresponding dimension of the content area
适用媒体	visual
计算值	the percentage as specified or the absolute length
动画类型	discrete
规范顺序	the unique non-ambiguous order defined by the formal grammar

语法

取值

<length>是一个非负的长度。相对于网格容器的块大小<percentage>是一个非负值<percentage>。如果网格容器的块大小是不确定的，百分比值将被视为像auto。<flex>是单位fr指定曲目的弹性系数的非负值尺寸。每条<flex>曲线都按照弹性系数的比例分摊余下的空间。

当出现在minmax()符号之外时，它意味着自动最小（即minmax(auto, <flex>)）。

max-content是表示占据网格轨道的网格项目的最大最大内容贡献的关键字。

注意：auto大小（只有auto大小）可以通过align-content和justify-content属性进行拉伸。

形式语法

<track-size>+where 
<track-size> = <track-breadth> | minmax( <inflexible-breadth> , <track-breadth> ) | fit-content( [ <length> | <percentage> ] )
where 
<track-breadth> = <length-percentage> | <flex> | min-content | max-content | auto
<inflexible-breadth> = <length> | <percentage> | min-content | max-content | auto
where 
<length-percentage> = <length> | <percentage>

例

HTML内容

<div id="grid">
  <div id="item1"></div>
  <div id="item2"></div>
  <div id="item3"></div>
</div>

CSS内容

#grid {
  width: 200px;
  display: grid;
  grid-template-areas: "a a";
  grid-gap: 10px;
  grid-auto-rows: 100px;
}

#grid > div {
  background-color: lime;
}

规范

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

浏览器兼容性

Feature	Chrome	Firefox (Gecko)	Internet Explorer	Edge	Opera	Safari
Basic support	57.01	52.0 (52.0)2	10.0-ms3	20-ms3	444	No support5

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