网格区域 | grid-area (Grid Layout) - CSS 中文开发手册

该grid-areaCSS属性是一个速记属性grid-row-start，grid-column-start，grid-row-end并且grid-column-end，指定范围内的网格项目的大小和位置网格行通过贡献线，跨度，或没有（自动），以它的网格布局，从而确定其边缘网格区域。

/* Keyword values */
grid-area: auto;
grid-area: auto / auto;
grid-area: auto / auto / auto;
grid-area: auto / auto / auto / auto;

/* <custom-ident> values */
grid-area: some-grid-area;
grid-area: some-grid-area / another-grid-area;

/* <integer> && <custom-ident>? values */
grid-area: some-grid-area 4;
grid-area: some-grid-area 4 / 2 another-grid-area;

/* span && [ <integer> || <custom-ident> ] values */
grid-area: span 3;
grid-area: span 3 / span some-grid-area;
grid-area: 2 span / another-grid-area span;

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

如果四个<grid-line>值被指定，grid-row-start设置为第一个值，grid-column-start被设置为第二个值，grid-row-end设置为第三个值，并且grid-column-end设置为第四个值。

当grid-column-end被省略时，如果grid-column-start是<custom-ident>，grid-column-end则被设置为<custom-ident>; 否则，设置为auto。

grid-row-end被省略时，如果grid-row-start是<custom-ident>，grid-row-end则被设置为<custom-ident>; 否则，设置为auto。

何时grid-column-start被省略，如果grid-row-start是<custom-ident>，所有四个伦敦都被设置为这个值。否则，它将设置为auto...

网格区域属性也可以设置为<custom-ident>作为该区域的名称，然后可以使用grid-template-areas...

grid-row-start*autogrid-column-start*autogrid-row-end*autogrid-column-end*auto

Applies to grid items and absolutely-positioned boxes whose containing block is a grid container   [Inherited](inheritance) no   Media visual   [Computed value](computed_value) as each of the properties of the shorthand:

grid-row-start*具体规定grid-column-start*具体规定grid-row-end*具体规定grid-column-end*具体规定

Animation type discrete   Canonical order the unique non-ambiguous order defined by the formal grammar  

句法

取值

auto是一个关键字，表示该属性对网格项目的放置没有贡献，表示自动放置或默认跨度1。

<custom-ident>如果有一个名为<custom-ident>-start“/” 的命名行<custom-ident>-end，它会将第一个这样的行添加到网格项目的位置。

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

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

<integer> && <custom-ident>?将_n_th网格线贡献给网格项目的位置。如果给出了一个负整数，则反向计数，从显式网格的末端开始。

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

<integer>为0是无效的。

span && [ <integer> || <custom-ident> ]为网格项的放置提供网格跨度，因此网格项的网格区域的对应边缘是n从相反的边缘来的线。

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

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

形式语法

<grid-line> [ / <grid-line> ]{0,3}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: 100px;
  grid-template: repeat(4, 1fr) / 50px 100px;
}

#item1 {
  background-color: lime;
  grid-area: 2 / 2 / auto / span 3;
}

#item2 {
  background-color: yellow;
}

#item3 {
  background-color: blue;
}