grid-area

语法

/* 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: 4 some-grid-area;
grid-area: 4 some-grid-area / 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;

值

auto

该关键字表明该属性未指定该如何纺织网格项目。网格项目会被以默认跨度（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-area = 
  <grid-line> [ / <grid-line> ]{0,3}  

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

<integer> = 
  <number-token>  

示例

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

规范

浏览器兼容性

参见

• Related CSS properties: grid-row, grid-row-start, grid-row-end, grid-column, grid-column-start, grid-column-end, grid-template-areas
• Grid Layout Guide: Grid template areas
• Video tutorial: Grid Template Areas