grid-auto-rows

CSS属性 grid-auto-rows 用于指定隐式创建的行轨道大小。

如果定位到某行中的网格元素没有使用 grid-template-rows来指定大小,则会隐式创建grid 轨道来保存它。这可能在显示定位到超出范围的行,或者由自动放置算法创建额外的行时发生。

语法

/* 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;

取值

<length>
一个非负的长度。
<percentage>
相对于网格窗口块尺寸的非负 <percentage> 值。如果网格容器的块尺寸是不确定的, 则百分比值将被视为 auto
<flex>
非负的、以 fr 为单位的维度指定轨道的弹性因子。每个 <flex>-尺寸的轨道都按其弹性因子的比例挤占剩余空间的一部分。

当使用在 minmax() 符号外时,意味着最小值为 auto (例: minmax(auto, <flex>)).

max-content
关键词,指明由网格元素中占用空间最大的那一个来决定轨道的尺寸。
min-content
关键词,指明由网格元素中占用空间最小的那一个来决定轨道的尺寸。
minmax(min, max)
函数符号,定义一个不小于min且不大于max的尺寸范围。如果maxmin小,则max会被忽略,函数会被录作min处理。作为最大值,<flex> 值设置了轨道的弹性因子。作为最小值,会被当作0处理(或者最小内容——当网格容器指定了尺寸为最小内容)。
auto
关键字,当用来指定最大值时与最大内容一致,当用来指定最小值时,它表示轨道中所有网格元素最小尺寸中的最大值(由min-width/min-height指定)。

注意:auto 轨道尺寸(且仅有 auto 轨道尺寸)可配合align-contentjustify-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;
}

规范

标准 状态 说明
CSS Grid Layout
grid-auto-rows
Candidate Recommendation 初始定义。
初始值auto
适用元素grid containers
是否是继承属性
Percentagesrefer to corresponding dimension of the content area
适用媒体visual
计算值the percentage as specified or the absolute length
Animation typediscrete
正规顺序the unique non-ambiguous order defined by the formal grammar

浏览器兼容性

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
grid-auto-rowsChrome Full support 57
Full support 57
Full support 29
Disabled
Disabled From version 29: this feature is behind the Enable experimental Web Platform features preference. To change preferences in Chrome, visit chrome://flags.
Edge Full support 16
Full support 16
Full support 12
Alternate Name
Alternate Name Uses the non-standard name: -ms-grid-rows
Firefox Partial support 52
Notes
Partial support 52
Notes
Notes Does not accept multiple track-size values. See bug 1339672.
No support 40 — 59
Notes Disabled
Notes Does not accept multiple track-size values. See bug 1339672.
Disabled 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 Full support 10
Alternate Name
Full support 10
Alternate Name
Alternate Name Uses the non-standard name: -ms-grid-rows
Opera Full support 44
Full support 44
Full support 28
Disabled
Disabled From version 28: this feature is behind the Enable experimental Web Platform features preference.
Safari Full support 10.1WebView Android Full support 57Chrome Android Full support 57
Full support 57
Full support 29
Disabled
Disabled From version 29: this feature is behind the Enable experimental Web Platform features preference. To change preferences in Chrome, visit chrome://flags.
Firefox Android Partial support 52
Notes
Partial support 52
Notes
Notes Does not accept multiple track-size values. See bug 1339672.
No support 40 — 59
Notes Disabled
Notes Does not accept multiple track-size values. See bug 1339672.
Disabled 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 Full support 43
Full support 43
Full support 28
Disabled
Disabled From version 28: this feature is behind the Enable experimental Web Platform features preference.
Safari iOS Full support 10.3Samsung Internet Android Full support 6.0

Legend

Full support  
Full support
Partial support  
Partial support
See implementation notes.
See implementation notes.
User must explicitly enable this feature.
User must explicitly enable this feature.
Uses a non-standard name.
Uses a non-standard name.

相关链接