CSS Grid 語法筆記

這篇不算教學,只是將 CSS Grid 的語法做個紀錄,所以沒有前言,也不會介紹 CSS Grid 是啥米東西 XD
如果你已經知道什麼是 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-column-gap 以及 grid-row-gap 可以合併為 grid-gap

.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 的最小高度。

  • ☞ 注意:
    • 沒有grid-auto-columns這種語法。
    • 沒有grid-auto這種簡寫。

新的單位:fr

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

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

grid-template-columns的單位改掉:

.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 的排序

夜深了,孕婦要睡覺了 XD,所以這部分先暫緩更新,如果明天有更新會再發粉絲團唷(不負責逃走~