0%

CSS Grid Item

Posted on

CSS grid system part III

Items (Child Elements / 子元素)

預設上，每列、每行都有一個子元素 (item)，但你可以使用一些語法讓子元素跨列或是跨行

  • grid-column 屬性決定了元素從哪列開始，哪列結束
    • ※ 其實是 grid-column-start, grid-column-end 的簡寫
    • 使用網格線，或是 span 來定義子元素要跨多少列
1
2
3
4
5
6
7
8
.item1 {
    grid-column: 1 / 5;
    /* 從 line1 跨到 line5，共四列 */        
}
.item2 {
    grid-column: 2 / span 3;
    /* 從 line2 開始，跨三列 */
}
  • grid-row 屬性是一樣的概念，只是轉換成定義子元素從哪行開始與結束
    • ※ 為 grid-row-start, grid-row-end 的簡寫
    • 使用網格線，或是 span 來定義子元素要跨多少行
1
2
3
4
5
6
7
8
.item3 {
    grid-row: 1 / 4;
    /* 從 line1 開始，line4 結束，跨三行 */
}
.item4 {
    grid-row: 1 / span 2;
    /* 從 line1 開始，跨兩行 */
}
  • grid-area 屬性是上面這幾種的合併簡寫
1
2
3
4
5
6
7
8
.item5 {
    grid-area: 1 / 2 / 5 / 6;
    /* 從行的 line1，列的 line2 開始，行的 line5，列的 line6 結束 */
}
.item6 {
    grid-area: 2 / 1 / span 2 / span 3;
    /* 從行的 line2，列的 line1 開始，跨兩行，跨三列 */
}
  • grid-area 的其他用法
    • 給子元素指定名稱：grid-area 可以指定每個網格的名稱，讓 grid-template-areas 使用
    • 可使用 “.” 來代表沒有命名的元素
1
2
3
4
5
6
7
8
9
10
11
12
13
14
.item1 {
    grid-area: myArea;
}
.grid-container {
    display: grid;
    grid-template-areas: 'myArea myArea myArea myArea myArea';
    grid-gap: 10px;
    /* 單引號內的區域會構成一行，使用空格隔開每個子元素
    上例顯示為 item1 單獨成一行，其寬度為五列，而下方的 myArea 則各占一列
    若是 'myArea myArea myArea . .'，則 item1 橫跨三列，剩下兩列會由 item2, item3 往上遞補
    若要讓 item1 跨兩行，則
    grid-template-areas: 'myArea myArea . . .' 'myArea myArea . . .',
    使用兩個單引號區域來定義兩行 */
}
1
2
3
4
5
6
7
8
<div class="grid-container">
    <div class="item1">1</div>
    <div class="item2">2</div>
    <div class="item3">3</div>
    <div class="item4">4</div>
    <div class="item5">5</div>
    <div class="item6">6</div>
</div>

+++ Mind Blown Moment +++

  • 用 grid-area 直接一開始就定好版型
1
2
3
4
5
6
7
8
9
10
11
12
.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 標籤的第一個元素，不一定會在網格中先出現
    • 搭配 media query 語法，可以大幅改變版面在裝置上的顯示 (響應式設計)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
.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; }
/* 出現順序是
item3 > item4 > item1
item5 > item6 > item2
*/

@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; }
}