grid-area

Baseline 广泛可用

此功能已得到良好建立，并且可以在许多设备和浏览器版本中使用。它自以下日期起在所有浏览器中均可用： 2020年7月.

grid-area CSS 简写属性 通过为其网格放置贡献一行、跨度或无内容（自动），从而指定网格项在 网格 中的大小和位置，从而指定其 网格区域 的边缘。

试一试

如果指定了四个<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。

grid-area属性也可以设置为 <custom-ident>，它充当区域的名称，然后可以使用 grid-template-areas 进行放置。

组成属性

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

语法

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

Values

auto

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

<custom-ident>

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

注意： 命名的网格区域会自动生成这种形式的隐式命名线，因此指定grid-area: 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-area = 
  <grid-line> [ / <grid-line> ]{0,3}  

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

示例

设置网格区域

HTML

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

CSS

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

结果

规范

规范
CSS 网格布局模块级别 2
# propdef-grid-area

浏览器兼容性

BCD 表格仅在浏览器中加载

另请参阅