grid-template-areas

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since October 2017.

grid-template-areas CSS 属性是网格区域 grid areas 在 CSS 中的特定命名。

尝试一下

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

语法

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; /* 未设置 */

none

网格容器没有定义任何的网格区块 (grid areas)。

<string>+

每一个给定的字符串会生成一行,一个字符串中用空格分隔的每一个单元 (cell) 会生成一列。多个同名的,跨越相邻行或列的单元称为网格区块 (grid area)。非矩形的网格区块是无效的。

形式语法

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

示例

HTML

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

CSS

css
#page {
  display: grid; /* 1.设置 display 为 grid */
  width: 100%;
  height: 250px;
  grid-template-areas:
    "head head"
    "nav  main"
    "nav  foot"; /* 2.区域划分 当前为 三行 两列 */
  grid-template-rows: 50px 1fr 30px; /* 3.各区域 宽高设置 */
  grid-template-columns: 150px 1fr;
}

#page > header {
  grid-area: head; /* 4. 指定当前元素所在的区域位置,从 grid-template-areas 选取值 */
  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;
}

结果

规范

Specification
CSS Grid Layout Module Level 2
# grid-template-areas-property
初始值none
适用元素网格容器
是否是继承属性
计算值as specified
动画类型离散值

浏览器兼容性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
grid-template-areas
none

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

参见