在此页

• 句法
• 形式定义
• 形式句法
• 范例
• 规范
• 浏览器兼容性
• 另请参阅
• 相关话题

grid-template-areas CSS property specifies named grid areas , establishing the cells in the grid and assigning them names.

The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.

Those areas are not associated with any particular grid item, but can be referenced from the grid-placement properties grid-row-start , grid-row-end , grid-column-start , grid-column-end , and their shorthands grid-row , grid-column ，和 grid-area .

句法

/* 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

The grid container doesn’t define any named grid areas.

<string> +

A row is created for every separate string listed, and a column is created for each cell in the string. Multiple named cell tokens within and between rows create a single named grid area that spans the corresponding grid cells. Unless those cells form a rectangle, the declaration is invalid.

形式定义

初始值	none
适用于	grid containers
继承	no
计算值	如指定
动画类型	discrete

形式句法

none | <string>+
					

范例

Specifying named grid areas

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 栅格布局 The definition of 'grid-template-areas' in that specification.	候选推荐	初始定义

浏览器兼容性

The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. 更新 GitHub 上的兼容性数据

	Desktop						Mobile
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Firefox for Android	Opera for Android	Safari on iOS	Samsung Internet
grid-template-areas	Chrome 完整支持 57 完整支持 57 完整支持 29 Disabled Disabled From version 29: this feature is behind the Enable experimental Web Platform features preference. To change preferences in Chrome, visit chrome://flags.	Edge 完整支持 16	Firefox 完整支持 52 完整支持 52 不支持 40 — 59 Disabled Disabled ). To change preferences in Firefox, visit	IE 不支持 No	Opera 完整支持 44 完整支持 44 完整支持 28 Disabled Disabled From version 28: this feature is behind the Enable experimental Web Platform features preference.	Safari 完整支持 10.1	WebView Android 完整支持 57	Chrome Android 完整支持 57 完整支持 57 完整支持 29 Disabled Disabled From version 29: this feature is behind the Enable experimental Web Platform features preference. To change preferences in Chrome, visit chrome://flags.	Firefox Android 完整支持 52 完整支持 52 不支持 40 — 59 Disabled Disabled ). To change preferences in Firefox, visit	Opera Android 完整支持 43 完整支持 43 完整支持 28 Disabled Disabled From version 28: this feature is behind the Enable experimental Web Platform features preference.	Safari iOS 完整支持 10.3	Samsung Internet Android 完整支持 6.0

图例

完整支持

完整支持

不支持

不支持

用户必须明确启用此特征。

用户必须明确启用此特征。

另请参阅

• Related CSS properties: grid-template-rows , grid-template-columns , grid-template
• Grid Layout Guide: Grid template areas
• Video tutorial: Grid Template Areas

元数据

• 最后修改： 2020 年 7 月 17 日

相关话题

1. CSS
2. CSS 参考
3. CSS 栅格布局
4. 指南

   1. Auto-placement in CSS Grid Layout
   2. Basic Concepts of grid layout
   3. Box alignment in CSS Grid Layout
   4. CSS Grid Layout and Accessibility
   5. CSS Grid Layout and Progressive Enhancement
   6. CSS grids, logical values, and writing modes
   7. Grid template areas
   8. Layout using named grid lines
   9. Line-based placement with CSS Grid
   10. Realizing common layouts using CSS Grid Layout
   11. Relationship of grid layout to other layout methods
   12. Subgrid
5. 特性

   1. flex
   2. grid
   3. grid-area
   4. grid-auto-columns
   5. grid-auto-flow
   6. grid-auto-rows
   7. grid-column
   8. grid-column-end
   9. grid-column-start
   10. grid-row
   11. grid-row-end
   12. grid-row-start
   13. grid-template
   14. grid-template-areas
   15. grid-template-columns
   16. grid-template-rows