CSS grid-template 屬性

定義和用法

grid-template 屬性是以下屬性的簡寫屬性：

另請參閱：

CSS 教程：CSS 網格項目

CSS 參考手冊：grid-area 屬性

CSS 參考手冊：grid-template-rows 屬性

CSS 參考手冊：grid-template-columns 屬性

CSS 參考手冊：grid-template-areas 屬性

實例

例子 1

制作第一列 150 像素高的三列網格布局：

.grid-container {
  display: grid;
  grid-template: 150px / auto auto auto;
}

親自試一試

例子 2

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

.item1 {
  grid-area: myArea;
}
.grid-container {
  display: grid;
  grid-template:
    '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:
    'header header header header header header'
    'menu main main main right right'
    'menu footer footer footer footer';
}

親自試一試

CSS 語法

grid-template: none|grid-template-rows / grid-template-columns|grid-template-areas|initial|inherit;
屬性值
值 描述
none 默認值。不規定列或行的尺寸。
grid-template-rows / grid-template-columns 規定列和行的尺寸。
grid-template-areas 規定使用命名項目的網格布局。
initial 將此屬性設置為其默認值。參閱 initial。
inherit 從其父元素繼承此屬性。參閱 inherit。

技術細節

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

瀏覽器支持

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

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