CSS 格線系統簡介

By徐培鈞
LinkedIn

更新日期： 2024 年 11 月 11 日

CSS 格線系統（Grid System）是一種將網頁畫面，分割成多欄的設計方法，讓網頁排版變得更精準且方便。

格線系統將畫面分為 12 欄的結構，使用者可以根據需求決定區塊寬度和佈局，從而實現響應式設計。

這樣的系統非常適合將內容分佈在不同裝置尺寸上，達到自適應效果。

常見的框架如 Bootstrap 和 Tailwind CSS ，就是利用格線系統，進行排版的好例子。

為什麼選擇格線系統？

使用格線系統可以帶來以下好處：

  • 快速且精準地安排畫面：12 欄的設計能提供充足的靈活性，使開發者可以根據內容需求進行簡便而一致的排版。
  • 響應式設計：藉由 CSS 設定每一欄的寬度，格線系統能在不同螢幕寬度下自動調整顯示，實現更好的用戶體驗。

方法重點：先設置格線寬度，簡化排版流程

格線系統的核心在於 預先在 CSS 中設置好每個欄位的寬度，然後在 HTML 中為元素指定相應的 class，就能夠輕鬆快速地設定元素的寬度比例。

例如，.col-6 表示元素寬度佔 50%，而 .col-4 則佔 33.33%。這樣的方式使得開發過程更加簡便：

  • 簡化 HTML 結構：您不需要每次手動計算或設定寬度，只需選擇適合的 class 即可。
  • 加快開發速度：可以根據需求快速配置佈局，並且方便後續維護或調整。
  • 保持一致性：統一的欄位設置讓整個頁面的佈局風格更加一致。

HTML 結構

以下是使用格線系統的基本 HTML 架構範例。在這個範例中，我們將一個 .container 內的內容劃分成數個 .row（行），每個行內包含數個 .col-{number}（欄），這些欄可以依需求設定不同的寬度。

<div class="container">
  <div class="row">
    <div class="col-12">
      <div class="box"></div>
    </div>
    <div class="col-1">
      <div class="box"></div>
    </div>
    <div class="col-1">
      <div class="box"></div>
    </div>
  </div>
  <div class="row">
    <div class="col-1">
      <div class="box"></div>
    </div>
    <div class="col-1">
      <div class="box"></div>
    </div>
    <div class="col-1">
      <div class="box"></div>
    </div>
  </div>
</div>

結構說明

  • .container：容器類別，限制了內容最大寬度並居中顯示。
  • .row：行容器，每行自動換行並包含多個 .col-* 欄位。
  • .col-{number}：欄位寬度設置，number 代表所佔的欄數（範圍為 1 到 12）。

CSS 格線系統的樣式設置

接著，我們會為每個欄位設置寬度，從 col-1 到 col-12 對應 12 欄設計的比例。範例如下：

.container {
    max-width: 1400px;
    padding: 0 10px;
    margin: auto;
    border: 1px solid #000;
}

.row {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    margin: 0 -10px;
}

[class*="col-"] {
    padding: 0 10px;
    border: 1px solid olive;
}

.box {
    height: 200px;
    width: 100%;
    background: pink;
}

/* 設置欄位寬度 */
.col-1 { width: 8.33%; }
.col-2 { width: 16.66%; }
.col-3 { width: 25%; }
.col-4 { width: 33.33%; }
.col-5 { width: 41.66%; }
.col-6 { width: 50%; }
.col-7 { width: 58.33%; }
.col-8 { width: 66.66%; }
.col-9 { width: 75%; }
.col-10 { width: 83.33%; }
.col-11 { width: 91.66%; }
.col-12 { width: 100%; }

样式說明

  • .container：設定最大寬度及置中效果。
  • .row：設置 display: flex，讓 .col-* 元素水平排列並在螢幕縮放時自動換行。
  • .col-{number}：定義各欄的寬度百分比。以 .col-1 為例，佔螢幕寬度的 8.33%（即 1/12），而 .col-12 則佔滿整行的 100%。

小結

CSS 格線系統通過將頁面切割成 12 欄的比例，可以靈活配置每一個區塊的寬度與佈局，並能適應不同螢幕尺寸。

開發者只需在 HTML 中，為區塊套用預設的欄位 class，即可輕鬆控制佈局。

這樣的設計在現代網頁設計中非常普及，尤其適合實現響應式布局。

Similar Posts