grid-template-areas

基线 广泛可用

此功能已发展成熟，可在许多设备和浏览器版本上运行。 它从以下日期起在所有浏览器中可用 2020 年 7 月.

**grid-template-areas** CSS 属性指定命名 网格区域，建立网格中的单元格并为其分配名称。

试一试

这些区域不与任何特定网格项目关联，但可以从网格放置属性 grid-row-start、grid-row-end、grid-column-start、grid-column-end 及其简写形式 grid-row、grid-column 和 grid-area 中引用。

语法

css
/* Keyword value */
grid-template-areas: none;

/* <string> values */
grid-template-areas: "a b";
grid-template-areas:
  "a b ."
  "a c d";

/* Global values */
grid-template-areas: inherit;
grid-template-areas: initial;
grid-template-areas: revert;
grid-template-areas: revert-layer;
grid-template-areas: unset;

值

none

网格容器不定义任何命名网格区域。

<string>+

对于列出的每个单独字符串，都会创建一个行，并且对于字符串中的每个单元格，都会创建一个列。 在行内和行之间，具有相同名称的多个单元格标记会创建一个跨越对应网格单元格的单个命名网格区域。 除非这些单元格形成一个矩形，否则声明无效。

网格中所有剩余的未命名区域可以使用空单元格标记引用。 空单元格标记是一系列一个或多个 . (U+002E FULL STOP) 字符，例如 .、... 或 ..... 等。 空单元格标记可用于在网格中创建空隙。

正式定义

初始值none
应用于网格容器
继承否
计算值按指定
动画类型离散

正式语法

grid-template-areas = 
  none       |
  <string>+

示例

指定命名网格区域

HTML

html
<div id="page">
  <header>Header</header>
  <nav>Navigation</nav>
  <main>Main area</main>
  <footer>Footer</footer>
</div>

CSS

css
#page {
  display: grid;
  width: 100%;
  height: 250px;
  grid-template-areas:
    "head head"
    "nav  main"
    ".  foot";
  grid-template-rows: 50px 1fr 30px;
  grid-template-columns: 150px 1fr;
}

#page > header {
  grid-area: head;
  background-color: #8ca0ff;
}

#page > nav {
  grid-area: nav;
  background-color: #ffa08c;
}

#page > main {
  grid-area: main;
  background-color: #ffff64;
}

#page > footer {
  grid-area: foot;
  background-color: #8cffa0;
}

在上面的代码中，我们使用了空标记 (.) 在网格容器中创建一个未命名区域，并使用它在网格的左下角创建一个空隙。

结果

规范

规范
CSS 网格布局模块第 2 级
# grid-template-areas-property

浏览器兼容性

BCD 表格仅在浏览器中加载

另请参阅