初學者指南：CSS Grid 的 repeat() 函數

By徐培鈞
LinkedIn

更新日期： 2024 年 11 月 5 日

在 CSS Grid 中，repeat() 函數是一個非常實用的工具，能讓我們更輕鬆地設定多重的欄（columns）或列（rows）配置。

對於希望簡化代碼並提高可讀性的開發者來說，repeat() 是不可或缺的功能。

本文將帶您了解 repeat() 的基本概念，並通過範例展示它的應用。

什麼是 repeat() 函數？

repeat() 函數是 CSS Grid 中，用來重複設置欄和列的簡便方法。

當我們需要多個欄或列，且其尺寸相同時，repeat() 可以讓我們避免手動撰寫每個尺寸，從而使代碼更簡潔易懂。

基本語法

repeat(重複次數, 欄或列的大小)
  • 重複次數：要重複的次數，例如 3 表示重複 3 次。
  • 欄或列的大小：每個欄或列的大小，可以是固定的像素值（如 100px）、百分比（如 20%）、比例（如 1fr）等。

基本範例

grid-template-columns: repeat(3, 1fr);

上例等價於：

grid-template-columns: 1fr 1fr 1fr;

這段代碼會創建三個等分的欄，且每一欄都佔整個容器的三分之一。

為什麼要使用 repeat()？

當我們在網格布局中，有許多相同大小的欄或列時，repeat() 可以簡化代碼。

例如，如果您需要 12 欄且每欄寬度都相等，那麼使用 repeat(12, 1fr) 就可以大大縮短代碼，使其更容易理解和維護。

使用 repeat() 主要有以下幾個優勢：

  1. 提高可讀性：減少重複代碼，使布局設置一目了然。
  2. 更易於維護：如果欄或列數量需要調整，只需改變重複次數即可，不用一一改寫。
  3. 支援響應式設計：搭配其他功能（如 minmax() 函數），能更靈活地控制響應式佈局。

repeat() 的應用範例

範例：建立等分欄位

假設我們希望創建四欄的等分布局，可以使用 repeat() 來簡化程式碼。

.container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

這段代碼創建了一個四欄的布局，每欄的寬度相等，且佔整個容器的四分之一。

範例：設定固定大小的欄位

如果您希望創建 5 個固定寬度為 200px 的欄，可以這樣寫：

.container {
  display: grid;
  grid-template-columns: repeat(5, 200px);
}

此範例將會創建 5 個寬度均為 200px 的欄。

範例：交錯寬度的重複欄

repeat() 函數也可以使用多個不同的尺寸來建立交錯寬度的欄。

例如，您可以使用 repeat(2, 100px 200px); 創建一個包含交錯寬度的佈局：

.container {
  display: grid;
  grid-template-columns: repeat(2, 100px 200px);
}

這段代碼會創建四個欄，其寬度分別是 100px、200px、100px、200px。

repeat(2, 100px 200px) 表示「重複 2 次 100px 200px 的組合」，從而形成一個交錯的欄寬效果。

範例：混合使用 repeat() 和其他值

有時我們需要一些固定大小的欄，再加上一些自動填滿的欄。

例如，創建一個布局，包含兩個寬度為 100px 的欄和三個等分的欄：

.container {
  display: grid;
  grid-template-columns: 100px 100px repeat(3, 1fr);
}

這段代碼創建了一個共五欄的布局，前兩欄寬度為 100px，後三欄等分剩餘空間。

進階：使用 repeat() 與 auto-fill 和 auto-fit

CSS Grid 的 repeat() 也可以與 auto-fill 和 auto-fit 結合使用，以自動填滿可用空間，適合用於響應式設計。

auto-fill 的應用

auto-fill 可自動重複欄的大小，直到容器的寬度不足以容納更多欄為止。

例如：

.container {
  display: grid;
  grid-template-columns: repeat(auto-fill, 150px);
  gap: 10px;
}

在此例中，欄的寬度固定為 150px，網格會自動填滿整個容器的寬度，適合在響應式設計中使用。

auto-fit 的應用

auto-fit 和 auto-fill 類似，但在容器空間不足以再容納新的欄時，它會自動調整欄的大小來填滿空間。

.container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
}

在此例中，每個欄的寬度會在 150px 到 1fr 之間自動調整，以填滿容器剩餘空間。

結語

repeat() 函數為 CSS Grid 帶來了極大的便利，特別是面對重複的欄和列設置時，讓我們的代碼更加簡潔、易於維護。

它不僅適用於靜態佈局，還能搭配 auto-fill 和 auto-fit 等功能，在響應式設計中發揮作用。

掌握 repeat() 的使用，將使您的 CSS Grid 佈局設計更加靈活，適應不同尺寸的裝置。

Similar Posts