CSS Grid 語法筆記

這篇不算教學，只是將 CSS Grid 的語法做個紀錄，所以沒有前言，也不會介紹 CSS Grid 是什麼。如果你已經知道 CSS Grid 的作用，也歡迎參考以下筆記，也許可以幫助你更了解相關語法。

從 Gird 開始

前置作業：將 div 的 display 設為 grid，接著定義 Grid 的寬度(columns)與間距(gap)

<div class="grid-box">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
  <div>9</div>
  <div>10</div>
</div>

.grid-box {
  display: grid; /* 設定 CSS grid 的第一步 */
  grid-template-columns: 100px 100px 100px; /*設定 Grid 的寬度*/
  grid-column-gap: 10px; /* 設定左右間距 */
  grid-row-gap: 20px; /* 設定上下間距 */
}

合併如下：

.grid-box {
  grid-gap: 20px 10px;
}

▼ 網頁示意圖

假使要設定 CSS Grid 的高度，可以再加上：

.grid-box {
  grid-template-rows: 100px 200px;
}

▼ 網頁示意圖

在這個範例中，row 有 4 行，可是我們只設定了 1 & 2 行，沒有設定高度的會以元素高度為高度(auto-height)。

☞ 可以用grid-auto-rows設定 auto-height 的最小高度。

新的單位：fr

fr 是因應 CSS Grid 而產生的新單位，全名是 fraction (分數)，這個分數不是 score 那個分數，而是數學分子 + 分母的那個分數。

我們可以用 fr 去設定 CSS Grid 的相對寬度，以達到 RWD 的縮放效果。如果是跟前面範例一樣使用 px，縮放的時候是不會有 RWD 的(這大家應該都很清楚了)

欲使用 fr，需修改 grid-template-columns，將單位改為 fr：

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

• 編號 1，4，7，10：占 1/4
• 編號 2，5，8：占 2/4
• 編號 3，6，9：占 1/4

▼ 網頁示意圖

這時候縮放就會有 RWD 效果囉~。

另外也可以混搭單位：

.grid-box {
  grid-template-columns: 1fr 2fr 100px;
}

重覆 Grid

如果 Grid 的寬度有一個固定的模式，可以用 repeat() 這個語法把它們合併，類似迴圈的感覺。

假設原本這樣寫：

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

可以看出來三個為一組，1fr 2fr 2fr 是一直重覆的，所以改寫如下：

.grid-box {
  grid-template-columns: repeat(3, 1fr 2fr 2fr); /*(重覆幾次, 重覆的寬度)*/
}

▼ 網頁示意圖

最左邊跟最右邊的 Grid 如果不會重覆，可以接在repeat的前後：

.grid-box {
  grid-template-columns: 10px repeat(2, 1fr 2fr 2fr) 180px;
}

Grid 排序

使用 grid-auto-flow 進行 Grid 的排序，預設屬性為 row (橫向排列)。

如果改用 column，Grid 就會變成縱向排列 (可以注意數字編號)：

.grid-box {
  grid-auto-flow: column;
}

▼ 網頁示意圖

此外也可以指定某一個 div 進行排序：

.grid-box div:nth-child(3) {
  order: 1;
}

如果沒有指定 order 的順序，預設就是 order: 0，而我們現在指定第三個 div 為 order: 1，所以第三個 div 的排序會跑到最後面。

☞ 承上，現在是縱向排列，所以 div 排列的順序是用「縱向」來看的喔。

▼ 網頁示意圖

接下來就可以用 order:N 任意調整排序：

.grid-box div:nth-child(3) {
  order: 1;
}

.grid-box div:nth-child(9) {
  order: 2;
}

.grid-box div:nth-child(6) {
  order: 3;
}

▼ 網頁示意圖

以上就是 Grid 的相關筆記。

部落格改版之後，是用 Grid + Flexbox 來排版的，有興趣的朋友可以自行扒皮 XD