介紹 Grid 外容器屬性

因篇幅較多，此篇將介紹 4 個屬性。

屬性

• display
• grid-template-columns
• grid-template-rows
• grid-template-areas

display

將元素定義為 Grid container。

• grid : 產生 block level 的 grid
• inline-grid：產生 inline level grid

grid-template-columns

• track size：表示該 column 寬度，可以使用 px，百分比，或是 fr
• line-name：表示該 column 名字，使用中括號將名字包起來，一個 column 可以有一個或是多個名字

以下的 css 表示以下圖片，

第1個 column 的 track-size 為 120px， line-name 叫做 column-start-blue，也可以是 column-1-blue

第2個 column 的 track-size 為 20px， line-name 叫做 column-red，

第3個 column 的 track-size 為 150px ， line-name 叫做 column-yellow，

第4個 column 的 track-size 為 80px ， line-name 叫做 column-green。

.container {
	grid-template-columns: [column-start-blue column-1-blue]120px [column-red]20px [column-yellow]150px [column-green]80px
}

若不想命名 line-name也沒關係，預設的 line-name 從 1 開始，一路往上加，可以看到以下圖片，120px 的 line-name 為 1，
，20px 的 line-name 為 2，150px 的 line-name 為 3，80px 的 line-name 為 4。

.container {
	grid-template-columns: 120px 20px 150px 80px
}

如果想使 column 寬度一樣，可以使用 repeat()，以下的例子來說，指的是 repeat 3 次，每一個都是 100px，命名都叫做 col-start。

.container {
  grid-template-columns: repeat(3, 100px [col-start]);
}

也跟下面的寫法相等

.container {
  grid-template-columns: 100px [col-start] 100px [col-start] 100px [col-start];
}

fr 單位為 Grid 的單位，主要是將剩下的空間用 fr 來分，如果是 1fr，表示將剩下的空間分成 1 等分，如果是 2fr，表示將剩下的空間分成 2 等分。

依照以下 css，可以看到第1個 column 佔的 width 為剩下空間的 1/6，第2個 column 佔的 width 為剩下空間的 2/6，第3個 column 佔的 width 為剩下空間的 3/6

.container {
  grid-template-columns: 1fr 2fr 3fr;
}

上面介紹到 fr 使用剩下空間做計算的，如果是以下的例子，50px 為 fr 分完才使用 50px，還是先將剩下的空間先分 50px，再使用 fr分?

答案是第一種，50px 為 fr 分完才另外使用 50px。剩餘的空間為只會分配給 fr。

.container {
  grid-template-columns: 1fr 50px 2fr 3fr;
}

grid-template-rows

grid-template-columns 和 grid-template-rows很類似，不一樣的地方在於 grid-template-columns是設定 column 寬度，grid-template-rows設定 row 高度。

• track size：表示該 row 高度，可以使用 px，百分比，或是 fr
• line-name：表示該 row 名字，使用中括號將名字包起來，一個 row 可以有一個或是多個名字

以下的 css 表示以下圖片，

第1個 row 的 track-size 為 120px， line-name 叫做 row-start-blue，也可以是 row-1-blue

第2個 row 的 track-size 為 20px， line-name 叫做 row-red，

第3個 row 的 track-size 為 150px ， line-name 叫做 row-yellow，

第4個 row 的 track-size 為 80px ， line-name 叫做 row-green。

.container {
	grid-template-rows: [row-start-blue row-1-blue]120px [row-red]20px [row-yellow]150px [row-green]80px
}

若不想命名 line-name也沒關係，預設的 line-name 從 1 開始，一路往上加，可以看到以下圖片，120px 的 line-name 為 1，20px 的 line-name 為 2，150px 的 line-name 為 3，80px 的 line-name 為 4。

.container {
	grid-template-rows: 120px 20px 150px 80px
}

TODO:img

如果想使 row 高度一樣，可以使用 repeat()，以以下的例子來說，指的是 repeat 3 次，每一個都是 100px，命名都叫做 row-start。

.container {
  grid-template-rows: repeat(3, 100px [row-start]);
}

也跟下面的寫法相等

.container {
  grid-template-rows: 100px [row-start] 100px [row-start] 100px [row-start];
}

fr 單位為 Grid 的單位，主要是將剩下的空間用 fr 來分，如果是 1fr，表示將剩下的空間分成 1 等分，如果是 2fr，表示將剩下的空間分成 2 等分。

依照以下 css，可以看到第1個 row 佔的 width 為剩下空間的 1/6，第2個 row 佔的 width 為剩下空間的 2/6，第3個 row 佔的 width 為剩下空間的 3/6

.container {
  grid-template-rows: 1fr 2fr 3fr;
}

上面介紹到 fr 使用剩下空間做計算的，如果是以下的例子，50px 為 fr 分完才使用 50px，還是先將剩下的空間先分 50px，再使用 fr分?

答案是第一種，50px 為 fr 分完才另外使用 50px。剩餘的空間為只會分配給 fr。

.container {
  grid-template-rows: 1fr 50px 2fr 3fr;
}

grid-template-areas

將 grid area 命名，屬性值為**<grid-area-name>，.** 和 none。

• <grid-area-name>
  為這一個 area 的名字

• .
  空的 grid cell

• none
  沒有定義任何的 grid area

.item-a {
  grid-area: header;
}
.item-b {
  grid-area: main;
}
.item-c {
  grid-area: sidebar;
}
.item-d {
  grid-area: footer;
}

.container {
  display: grid;
  grid-template-columns: 50px 50px 50px 50px;
  grid-template-rows: auto;
  grid-template-areas: 
    "header sidebar sidebar sidebar"
    "header main main . "
    "header main main . "
    "header footer footer footer";
}

參考資料：
A Complete Guide to Grid