進階篇：在父層使用 CSS 格線系統配置多欄排版

更新日期： 2024 年 11 月 11 日

在前面介紹的 CSS 格線系統中，通常是將格線樣式設定在子元素上，例如透過 col-12 或 col-6 來設定各欄位的寬度。

然而，格線系統也可以靈活應用於父層級的設定，通過指定父層的「列數」來影響其子元素的排列。

這種方式在設計多欄排版時尤其高效，不僅能使佈局更整潔，還能減少在每個子元素上設定 class 的重複工作。

本文將介紹如何在父層設定 CSS 格線系統進行多欄配置。

使用 cols- 系列 Class 在父層設置欄位配置

在這種設定方式中，父層容器會使用 cols- 系列 class（例如 cols-2 或 cols-3），以指定子元素自動分配的列數。

當設定了列數後，系統將自動計算並應用每個子元素的寬度。

HTML 結構範例

在 HTML 中，可以簡單地使用 cols- 類別來控制多欄的配置。

例如，cols-3 表示將其子元素分成三欄顯示。

<div class="container">
  <div class="row cols-3">
    <div class="col">
      <div class="box">卡片 1</div>
    </div>
    <div class="col">
      <div class="box">卡片 2</div>
    </div>
    <div class="col">
      <div class="box">卡片 3</div>
    </div>
  </div>
</div>

說明

• .container：外層容器，控制整體寬度與置中。
• .row：父層行容器，用於排版，並包含 cols-3 設置列數。
• cols-3：指定 .row 下的所有 .col 元素應分為三等分。
• .col：子欄位，在此範例中每個子元素寬度會自動分配為三等分，即 33.33%。

CSS 樣式設定：cols- 父層 Class 的配置

在 CSS 中，cols- 系列的 class 可以設定每一列包含的欄位數量。

此時，父層的 class 會決定其內部每個 .col 子元素的寬度。以下是範例設定：

.container {
  max-width: 1400px;
  padding: 0 10px;
  margin: auto;
}

.row {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
}

[class*="cols-"] > .col {
  box-sizing: border-box;
  padding: 0 10px;
}

.cols-2 > .col {
  width: 50%; /* 兩欄 */
}

.cols-3 > .col {
  width: 33.33%; /* 三欄 */
}

.cols-4 > .col {
  width: 25%; /* 四欄 */
}

.cols-5 > .col {
  width: 20%; /* 五欄 */
}

.cols-6 > .col {
  width: 16.66%; /* 六欄 */
}

說明

• .row：設定 display: flex 讓子元素可以水平排列並自動換行。
• [class*="cols-"] > .col：使用屬性選擇器為每個 .cols-* 的子 .col 設定內邊距與邊框。
• .cols-2 > .col 到 .cols-6 > .col：為不同欄數分別設定子元素的寬度。例如，cols-3 設置會將 .col 元素分為三等分。

父層與子層設定的組合應用

父層設置欄位配置可以與子層的 col- 系列 class 結合使用，使佈局更靈活。

父層定義每列顯示的子元素數量，子層的 col- class 則可以在需要時覆蓋指定的欄位寬度。

範例：父層與子層結合的 HTML 結構

以下範例展示了 cols-3 父層設置與 col-6 的子層 class 配合使用，靈活配置每個元素的寬度。

<div class="container">
  <div class="row cols-3">
    <div class="col col-6">
      <div class="box">卡片 1</div>
    </div>
    <div class="col">
      <div class="box">卡片 2</div>
    </div>
    <div class="col">
      <div class="box">卡片 3</div>
    </div>
  </div>
</div>

在這個例子中：

• 父層的 cols-3 設定會將 .col 子元素分為三等分，每個子元素默認寬度為 33.33%。
• col-6 class 覆蓋了第一個子元素的寬度，讓其佔據 50% 的寬度。

小結

在 CSS 格線系統中，使用父層設定欄位配置可以顯著提高排版效率，特別適合在多欄的卡片式布局中應用。

通過在父層設置 cols- 系列 class，我們可以更快速地調整整體排版，並且在需要時使用子層的 col- 類別進行進一步的覆蓋。

這種結合讓網頁佈局在不同裝置上更加靈活和一致，是現代網頁設計中有效的進階技術。