筆記 - CSS Grid 排版系統

Posted on In

本篇學習 CSS grid 排版系統與 Bootstrap 使用。

  • Flexbox 一維排版：已有現成內容，微調間距或對其方式（content-out）
  • Grid 網格排版：先有排版設計，把元素放進去（layout-in）

Grid system 由一組水平線和一組垂直線交錯組合而成，這些相交而成的線被稱為「欄 (column)」和「列 (row)」，可以想成是隱形的輔助線，用來調整間距和對齊。

Grid 元素宣告

定義 grid container

display: grid

定義 grid items

定義 column 與 row 來形成 grid。以 3 column x 2 row 網格為例

1
2
3
4
5
.wrapper {
  display: grid;
  grid-template-rows: 75px 75px;    
  grid-template-columns: 100px 100px 100px;
}

單位使用

grid-template-rows 與 grid-template-columns 除了 px 之外，還有其他單位可以使用：

  • px, em, rem, %
  • fr: fraction, 指 container 剩餘空間分幾等分。當容器寬度改變時，fr 也能彈性縮放
  • minmax(min, max): 給定尺寸的最小與最大值
  • repeat(times, width): 大量劃定重複性的區塊，例如 repeat(5, 50px)
  • auto: 會有兩種行為
    • 若搭配其他彈性單位（例如 fr），auto 元素尺寸照內容自動調整
    • 搭配固定單位（例如 px），auto 自動延伸填滿剩餘空間

定義間距

grid-gap 在格子之間加入間隔

grid-gap 是 grid-row-gap 與 grid-column-gap 合併，先 row 再 column

1
grid-gap: 5px 20px;

操作 item 配置

操作時需要用 grid line 來思考，若希望 item1 橫跨第一條線到第四條線，則寫

1
2
3
4
5
6
7
8
9
.item1 {
  grid-column-start: 1;
  grid-column-end: 4;
}

/* 或是 */
.item1 {
  grid-column: 1 / 4;
}

Bootstrap Grid System

官網 docs > layout > grid

  1. Bootstrap 最基本的元素是 container，所以起手式都是把 container div 放在 body 裡面。

    1
    2
    3
    <body>
      <div class="container"></div>
    </body>

  2. Bootstrap container 默認的設計模式是 Mostly Fluid，表示在不同的 breakpoint 會修改 container 的最大寬度。若將 .container 改為 .container-fluid 則使畫面佔據整個 viewport 的寬度 (width: 100%)。

  3. Bootstrap grid item 是由 row 包裝 column 而組成，每個 column 就是單個 item，是 row 的直接子元素才能運行。

  4. Bootstrap CSS 默認為 flexbox ，故若 column 沒有指定寬度，每個 column 都是相同寬度。 Bootstrap grid layout 是以 12 個 column 來建構而成，若要指定 column 寬度，就指定類別，例如 .col-4 就會佔據 1/3 的寬度。

  5. 當 viewport 變小時，grid row 會按比例縮小，每個 column item 會保持相對寬度。

  6. Bootstrap layout 內含 6 個 breakpoint (官網docs > layout > grid)，等同 CSS media query 中的 min-width，表示在該 breakpoint 寬度以上的排版，使用時加入 class 即可。例如 .col-sm-8 指在 viewport 寬度 >= 576px 時，item 寬度要 8 個 column 寬。由於 mobile first，bootstrap 設計是為較大的 viewport 寬來設定 media query （跟之前學習的一樣），所以若沒指定都是預設最小 viewport 樣式 (< 576px)。

1
2
3
4
5
6
7
8
9
10
11
<div class="container">
  <div class="row">
    <div class="col-12 col-md-4 col-lg-3">1</div> 
    <div class="col-12 col-md-4 col-lg-3">2</div> 
    <div class="col-12 col-md-4 col-lg-6">3</div> 
  </div> 
   <div class="row">
    <div class="col-12 col-md-6 col-lg-8">4</div> 
    <div class="col-12 col-md-6 col-lg-4">5</div> 
  </div>
</div>

這樣就只需要加 html 元素類別，不用寫任何一行 CSS 就可以排版了。