CSS grid-template-areas 屬性

定義和用法

grid-template-areas 屬性在網格布局中規定區域。

您可以使用 grid-area 屬性命名網格項目，然后在 grid-template-areas 屬性中引用該名稱。

每個區域由撇號定義。請使用句號來引用沒有名稱的網格項目。

另請參閱：

CSS 教程：CSS 網格項目

CSS 參考手冊：grid-area 屬性

CSS 參考手冊：grid-template 屬性

實例

例子 1

使命名項目 "myArea" 在五列網格布局中橫跨兩列：

.item1 {
  grid-area: myArea;
}
.grid-container {
  display: grid;
  grid-template-areas: "myArea myArea . . .";
}

親自試一試

例子 2

規定兩行，其中 "item1" 在前兩行中橫跨前兩列（在五列網格布局中）：

.item1 {
  grid-area: myArea;
}
.grid-container {
  display: grid;
  grid-template-areas:
    'myArea myArea . . .'
    'myArea myArea . . .';
}

親自試一試

例子 3

命名所有項目，并制作一張現成網頁模板：

.item1 { grid-area: header; }
.item2 { grid-area: menu; }
.item3 { grid-area: main; }
.item4 { grid-area: right; }
.item5 { grid-area: footer; }
.grid-container {
  display: grid;
  grid-template-areas:
    'header header header header header'
    'menu main main main right right'
    'menu footer footer footer footer';
}

親自試一試

CSS 語法

grid-template-areas: none|itemnames;

屬性值

值 描述
none 默認值。未命名網格區域（grid areas）。
itemnames 規定每列和每行應如何顯示的序列。

技術細節

默認值： none
繼承： 否
動畫制作： 支持。請參閱：動畫相關屬性。
版本： CSS Grid Layout Module Level 1
JavaScript 語法： object.style.gridTemplateAreas=". . . myArea myArea"

瀏覽器支持

表格中的數字注明了完全支持該屬性的首個瀏覽器版本。

Chrome IE / Edge Firefox Safari Opera
57 16 52 10 44