grid-area

版本： CSS3

CSS 属性 grid-area 是一种对于 grid-row-start、grid-column-start、grid-row-end 和 grid-column-end 的简写，通过基线（line），跨度（span）或没有（自动）的网格放置在 grid row 中指定一个网格项的大小和位置，继而确定 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: 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;

浏览器支持

IE浏览器 火狐浏览器 opera浏览器 chrome浏览器 safari浏览器
IE不支持 grid-area ，其余浏览器都支持 grid-area

语法

grid-area : auto | <custom-ident>|[<integer>&&<custom-ident>?] |[ span &&[ <integer>||<custom-ident>] ]

如果指定了4个<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 放置。

取值

  • auto ：该关键字表明该属性未指定该如何纺织网格项目。网格项目会被以默认跨度（span）1自动放置
  • <custom-ident> ：如果存在以（'<custom-ident>-start'/'<custom-ident>-end'）命名的自定义基线，它会将第一个这样的基线贡献给网格单元以布置。否则，它就会被当作整数 1 与<custom-ident>一起指定。
  • <integer>&&<custom-ident>? ：将第 n 条网格基线贡献给网格单元布置。如果指定的是负数，则指的是从下边界向上边界计算的反向顺序。如果提供的是<custom-ident>，那么只有以此命名的基线才会被计算。如果所命名的基线数超过了网格线数，为了找到该位置，所有隐式的网格线会被假定拥有这个命名。integer 值不能为 0。
  • span &&[ <integer>||<custom-ident> ：为网格单元定义一个跨度，使得网格单元的网格区域中的一条边界远离另一条边界线 n 条基线。如果提供的是<custom-ident>，则只有以此命名的基线才会被计算。如果网格线不足，则假定与搜索方向对应的显式网格一侧的所有隐式网格线都具有该名称。如果忽略<integer>，它就默认设为 1。它的值也不能为0。

实例 

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

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

上篇： grid-column-end

下篇： grid-auto-columns