grid-row

grid-row 属性是一种 grid-row-start 和 grid-row-end 的缩写(shorthand)形式,它定义了网格单元与网格行(row)相关的尺寸和位置,可以通过在网格布局中的基线(line),跨度(span),或者什么也不做(自动),从而指定 grid area 的行起始与行结束。

如果指定了两个 <grid-line> 值,那么斜杠号前的值就被指定为 grid-row-start,斜杠后面的值就被指定为 grid-row-end 的值。

语法

/* 不同类型的属性值 */
/* Keyword values */
grid-row: auto;
grid-row: auto / auto;

/* <custom-ident> values */
grid-row: somegridarea;
grid-row: somegridarea / someothergridarea;

/* <integer> + <custom-ident> values */
grid-row: somegridarea 4;
grid-row: 4 somegridarea / 6;

/* span + <integer> + <custom-ident> values */
grid-row: span 3;
grid-row: span somegridarea;
grid-row: 5 somegridarea span;
grid-row: span 3 / 6;
grid-row: span somegridarea / span someothergridarea;
grid-row: 5 somegridarea span / 2 span;

/* Global values */
grid-row: inherit;
grid-row: initial;
grid-row: unset;

auto
表示对网格的布置行为不做干涉,即自动布置,自动的 span 或者默认 span 值为 1。
<custom-ident>
如果存在自定义的基线名('<custom-ident>-start'/'<custom-ident>-end'),它就将第一个这样的基线贡献给网格单元。

注意: 被命名的网格区域(grid areas)会自动生成隐式的被命名的基线,因此指定 grid-row: foo; 将会选择这个命名区域的开始和结束的边界(除非在它之前存在显式指定的以 foo-start/foo-end 命名的其他基线)。

否则,它就会被当作整数 1 与 <custom-ident> 一起指定。

<integer> && <custom-ident>?
将第 n 条网格基线贡献给网格单元布置。如果指定的是负数,则指的是从下边界向上边界计算的反向顺序。如果提供的是 <custom-ident>,那么只有以此命名的基线才会被计算。如果所命名的基线数超过了网格线数,为了找到该位置,所有隐式的网格线会被假定拥有这个命名。
integer 值不能为 0
span && [ <integer> || <custom-ident> ]
为网格单元定义一个跨度,使得网格单元的网格区域中的一条边界远离另一条边界线 n 条基线。如果提供的是 <custom-ident>,则只有以此命名的基线才会被计算。如果网格线不足,则假定与搜索方向对应的显式网格一侧的所有隐式网格线都具有该名称。

如果忽略 <integer> ,它就默认设为 1。它的值也不能为0。

形式语法

<grid-line> [ / <grid-line> ]?

where
<grid-line> = auto | <custom-ident> | [ <integer> && <custom-ident>? ] | [ span && [ <integer> || <custom-ident> ] ]

示例

HTML Content

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

CSS Content

#grid {
  display: grid;
  height: 200px;
  grid-template-columns: 200px;
  grid-template-rows: repeat(6, 1fr);
}

#item1 {
  background-color: lime;
}

#item2 {
  background-color: yellow;
  grid-row: 2 / 4;
}

#item3 {
  background-color: blue;
  grid-row: span 2 / 7;
}

IE 中的问题

IE11 不支持网格单元的自动布置。除非显式地注释 -ms-grid-column 和 -ms-grid-row,否则所有单元都会在网格的第一行/列结束。这里有一个使用 JavaScript 提供自动注释的工具:source repository.

规范

Specification Status Comment
CSS Grid Layout
grid-row
Candidate Recommendation Initial definition
初始值as each of the properties of the shorthand:
适用元素grid items and absolutely-positioned boxes whose containing block is a grid container
是否是继承属性
适用媒体visual
计算值as each of the properties of the shorthand:
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-rowChrome 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 16Firefox Full support 52
Full support 52
No support 40 — 59
Disabled
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 No support NoOpera 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 Full support 52
Full support 52
No support 40 — 59
Disabled
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
No support  
No support
User must explicitly enable this feature.
User must explicitly enable this feature.

参见