CSS 網格項目

1
2
3
4
5

親自試一試

子元素（項目）

網格容器包含網格項目。

默認情況下，容器在每一行的每一列都有一個網格項目，但是您可以設置網格項目的樣式，讓它們跨越多個列和/或行。

grid-column 屬性：

grid-column 屬性定義將項目放置在哪一列上。

您可以定義項目的開始位置以及結束位置。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

注釋：grid-column 屬性是 grid-column-start 和 grid-column-end 屬性的簡寫屬性。

如需放置某個項目，您可以引用行號（line numbers），或使用關鍵字 "span" 來定義該項目將跨越多少列。

實例

使 "item1" 從第 1 列開始并在第 5 列之前結束：

.item1 {
  grid-column: 1 / 5;
}

親自試一試

實例

使 "item1" 從第 1 列開始，并跨越 3 列：

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

親自試一試

實例

使 "item2" 從第 2 列開始，并跨越 3 列：

.item2 {
  grid-column: 2 / span 3;
}

親自試一試

grid-row 屬性：

grid-row 屬性定義了將項目放置在哪一行。

您可以定義項目的開始位置以及結束位置。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

注釋：grid-row 屬性是 grid-row-start 和 grid-row-end 屬性的簡寫屬性。

如需放置項目，您可以引用行號，或使用關鍵字 "span" 定義該項目將跨越多少行：

實例

使 "item1" 在 row-line 1 開始，在 row-line 4 結束：

.item1 {
  grid-row: 1 / 4;
}

親自試一試

實例

使 "item1" 從第 1 行開始并跨越 2 行：

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

親自試一試

grid-area 屬性

grid-area 屬性可以用作 grid-row-start、grid-column-start、grid-row-end 和 grid-column-end 屬性的簡寫屬性。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

實例

使 "item8" 從 row-line 1 和 column-line 2 開始，在 row-line 5 和 column line 6 結束：

.item8 {
  grid-area: 1 / 2 / 5 / 6;
}

親自試一試

實例

使 "item8" 從 row-line 2 和 column-line 開始，并跨越 2 行和 3 列：

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

親自試一試

命名網格項

grid-area 屬性也可以用于為網格項目分配名稱。

Header
Menu
Main
Right
Footer

可以通過網格容器的 grid-template-areas 屬性來引用命名的網格項目。

實例

item1 的名稱是 "myArea"，并跨越五列網格布局中的所有五列：

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

親自試一試

每行由撇號（' '）定義。

每行中的列都在撇號內定義，并以空格分隔。

注釋：句號表示沒有名稱的網格項目。

實例

讓 "myArea" 跨越五列網格布局中的兩列（句號代表沒有名稱的項目）：

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

親自試一試

如需定義兩行，請在另一組撇號內定義第二行的列：

實例

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

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

親自試一試

實例

命名所有項目，并制作一張隨時可用的網頁模板：

.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';
}

親自試一試

項目的順序

網格布局允許我們將項目放置在我們喜歡的任意位置。

HTML 代碼中的第一項不必顯示為網格中的第一項。

1
2
3
4
5
6

實例

.item1 { grid-area: 1 / 3 / 2 / 4; }
.item2 { grid-area: 2 / 3 / 3 / 4; }
.item3 { grid-area: 1 / 1 / 2 / 2; }
.item4 { grid-area: 1 / 2 / 2 / 3; }
.item5 { grid-area: 2 / 1 / 3 / 2; }
.item6 { grid-area: 2 / 2 / 3 / 3; }

親自試一試

您可以通過使用媒體查詢來重新排列某些屏幕尺寸的順序：

實例

@media only screen and (max-width: 500px) {
  .item1 { grid-area: 1 / span 3 / 2 / 4; }
  .item2 { grid-area: 3 / 3 / 4 / 4; }
  .item3 { grid-area: 2 / 1 / 3 / 2; }
  .item4 { grid-area: 2 / 2 / span 2 / 3; }
  .item5 { grid-area: 3 / 1 / 4 / 2; }
  .item6 { grid-area: 2 / 3 / 3 / 4; }
}

親自試一試