CSS grid-area 屬性

定義和用法

grid-area 屬性網格項目的尺寸以及在網格布局中的 位置，它是以下屬性的簡寫屬性：

grid-area 屬性還可以用于為網格項分配名稱。然后，可以通過網格容器的 grid-template-areas 屬性引用命名的網格項目。請參閱下面的例子。

另請參閱：

CSS 教程：CSS 網格布局

實例

例子 1

使 "item1" 在行 2 列 1 開始，并橫跨兩行三列：

.item1 {
  grid-area: 2 / 1 / span 2 / span 3;
}

親自試一試

提示：頁面底部提供更多實例。

CSS 語法

grid-area: grid-row-start / grid-column-start / grid-row-end / grid-column-end | itemname;

屬性值

值 描述
grid-row-start 規定從哪一行開始顯示項目。
grid-column-start 規定從哪一列開始顯示項目。
grid-row-end 規定在哪條行線停止顯示項目，或跨越多少行。
grid-column-end 指定在哪條列線停止顯示項目，或跨越多少列。
itemname 規定網格項目的項目。

技術細節

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

更多實例

例子 2

Item1 被命名 "myArea"，并在五列網格布局中橫跨所有五列：

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

親自試一試

例子 3

使 "myArea" 在五列網格布局中橫跨兩列（句號表示沒有名稱的項目）：

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

親自試一試

例子 4

使 "item1" 橫跨兩列和兩行：

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

親自試一試

例子 5

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

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

親自試一試

瀏覽器支持

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

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