grid-template-areas 属性是 grid areas 在CSS中的特定命名.

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

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

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

以上网格区块(grid areas)没有和任何的网格项(grid item)关联,但是它们可以和一些网格定位属性(grid-placement properties)关联起来,比如grid-row-start, grid-row-end, grid-column-startgrid-column-end;也可以和一些速记(shorthands)属性关联起来,比如grid-rowgrid-column 和 grid-area

初始值none
适用元素grid containers
是否是继承属性
适用媒体visual
计算值as specified
Animation typediscrete
正规顺序the unique non-ambiguous order defined by the formal grammar

语法

none
网格容器没有定义任何的网格区块(grid areas)。
<string>+
每一个给定的字符串会生成一行,一个字符串中用空格分隔的每一个单元(cell)会生成一列。多个同名的,跨越相邻行或列的单元称为网格区块(grid area)。非矩形的网格区块是无效的。

形式化语法

none | <string>+

例子

HTML

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

CSS

#page {
  display: grid;
  width: 100%;
  height: 250px;
  grid-template-areas: "head head"
                       "nav  main"
                       "nav  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 Grid Layout
grid-template-areas
Candidate Recommendation 最初的定义

浏览器兼容性

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

特性 Chrome Edge Firefox (Gecko) Internet Explorer Opera Safari
基本支持 57.0[1] (Yes)[3] 52.0 (52.0)[2] 未实现[3] 44[4] 10.1
特性 Android Webview Chrome for Android Edge Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
基本支持 57.0[1] 57.0[1] (Yes) 52.0 (52.0)[2] 未实现[3] 44 10.3

[1] 从Chrome 29.0开始支持,在 chrome://flags中打开"开启实验性网络平台特性"(experimental Web Platform features)。从Chrome 57.0开始默认开启。

[2] 从Gecko 40.0 (Firefox 40.0 / Thunderbird 40.0 / SeaMonkey 2.37)开始支持, 在设置中打开layout.css.grid.enabled,默认是 false。从Gecko 52.0 (Firefox 52.0 / Thunderbird 52.0 / SeaMonkey 2.49)开始默认开启。

[3] EdgeHTML 16已支持。Internet Explorer 和 Edge 实现了一个旧版本的规范,旧的规范中没有定义这个属性。

[4] 从 Opera 28.0开始支持,在 chrome://flags中打开"开启实验性网络平台特性"(experimental Web Platform features)。从Opera 44开始默认开启。

See also

文档标签和贡献者

此页面的贡献者: TommyFu
最后编辑者: TommyFu,