格行开始 | grid-row-start

grid-row-start

grid-row-start通过贡献一条线，一个跨度，或全无（自动）将其放置网格，从而指定其的直列起始沿指定网格行内的网格项的开始位置网格区域。

/* Keyword value */
grid-row-start: auto;

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

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

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

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

语法

该属性被指定为单个<grid-line>值。<grid-line>值可以被指定为：

• 要么auto关键词

• 或者是<custom-ident>

• 或者<integer>

• 或者两者兼而有之<custom-ident>和<integer>，被一个空间隔开

• 或关键字span连同一个<custom-ident>或一个<integer>或两个。

取值

auto是一个关键字，指示该属性对网格项目的放置没有任何贡献，表示自动放置，自动跨度或默认跨度1。<custom-ident>如果有一个名为“<custom-ident> -start”的命名行，它会将第一个这样的行添加到网格项的位置。

注意：命名的网格区域会自动生成此表单的隐式命名行，因此指定grid-row-start: foo;将选择该命名的网格区域的起始边缘（除非foo-start在其之前明确指定了另一个命名行）。

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

<integer> && <custom-ident>?向网格项的位置贡献第n行网格。如果给出一个负整数，则从显式网格的结束边缘开始反向计数。

如果名称被指定为<custom-ident>，只有具有该名称的行才会被计算在内。如果没有足够的名称行存在，则假定所有隐式网格行都具有该名称，以便找到该位置。

一个<integer>值0是无效的。

span && [ <integer> || <custom-ident> ]为网格项的位置提供网格跨度；这样，网格项的网格区域的行开始边缘是从结束边缘开始的n行。

如果名称被指定为<custom-ident>，只有具有该名称的行才会被计算在内。如果没有足够的名称行存在，则显式网格一侧的所有隐式网格线，对应于搜索方向，都假定具有该名称，以便计算此跨度。

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

<custom-ident>不能取span值。

形式语法

<grid-line>where 
<grid-line> = auto | <custom-ident> | [ <integer> && <custom-ident>? ] | [ span && [ <integer> || <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: 200px / repeat(4, 1fr
}

#item1 {
  background-color: lime;
  grid-row-start: span 2;
}

#item2 {
  background-color: yellow;
}

#item3 {
  background-color: blue;
}

规范

浏览器兼容性