CSS Grid Item
1
2
3
4
5
子元素（專案）
一個 grid 容器 包含 grid 專案。
預設情況下，一個容器對於每一行中的每一列都有一個 grid 專案，但你可以對 grid 專案進行樣式設定，使其跨越多個列和/或行。
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 屬性的簡寫屬性。
要放置一個專案，你可以引用線編號，或者使用關鍵字 "span" 來定義專案將跨越多少列。
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" 來定義專案將跨越多少行
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
命名 Grid 專案
grid-area 屬性也可用於為 grid 專案分配名稱。
Header
選單
主選單
Right
頁尾
命名 grid 專案可以透過 grid 容器的 grid-template-areas 屬性來引用。
示例
Item1 被命名為 "myArea"，並在一個五列的網格佈局中跨越所有五列
.item1 {
grid-area: myArea;
}
.grid-container {
grid-template-areas: 'myArea myArea myArea myArea myArea';
}
每一行由單引號 (' ') 定義
每一行中的列在單引號內定義，用空格分隔。
注意： 點號（.）代表一個沒有名稱的 grid 專案。
示例
讓 "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';
}
專案的順序
Grid Layout 允許我們將專案放置在我們喜歡的任何位置。
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; }
}
