grid-row

此属性是以下 CSS 属性的简写

• grid-row-end
• grid-row-start

/* 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: revert;
grid-row: revert-layer;
grid-row: unset;

此属性指定为一个或两个<grid-line>值。

如果给出两个<grid-line>值，则它们由/分隔。grid-row-start 详细属性设置为斜杠之前的值，grid-row-end 详细属性设置为斜杠之后的值。

每个<grid-line>值可以指定为

• auto关键字
• 或<custom-ident>值
• 或<integer>值
• 或<custom-ident>和<integer>，用空格分隔
• 或span关键字与<custom-ident>或<integer>或两者一起使用。

auto

是一个关键字，表示该属性不会对网格项的放置做出任何贡献，表示自动放置、自动跨度或默认跨度为1。

<custom-ident>

如果存在名为<custom-ident>-start/<custom-ident>-end的命名行，则它会将第一条这样的行贡献给网格项的放置。

注意：命名网格区域会自动生成此形式的隐式命名行，因此指定grid-row: foo;将选择该命名网格区域的开始/结束边缘（除非在此之前显式指定了名为foo-start/foo-end的其他行）。

否则，这将被视为已与<custom-ident>一起指定了整数1。

<integer> && <custom-ident>?

将第 n 条网格线贡献给网格项的放置。如果给定负整数，则它会反向计数，从显式网格的结束边缘开始。

如果名称作为<custom-ident>给出，则仅计算具有该名称的行。如果不存在足够具有该名称的行，则为查找此位置的目的，假定所有隐式网格行都具有该名称。

<integer> 值为 0 是无效的。

span && [ <integer> || <custom-ident> ]

为网格项目的放置贡献一个网格跨度，使得网格项目的网格区域的对应边缘距离相对边缘 n 行。

如果名称作为 <custom-ident> 给出，则只计算具有该名称的行。如果不存在足够具有该名称的行，则出于计算此跨度的目的，假定显式网格对应于搜索方向一侧的所有隐式网格线都具有该名称。

如果省略了 <integer>，则默认为 1。负整数或 0 无效。

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

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

HTML

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

CSS

#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;
}

结果

• grid-row-start
• grid-row-end
• grid-column
• grid-column-start
• grid-column-end
• 使用 CSS 网格进行基于行的放置
• 视频：基于行的放置