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

更新日期: 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);
}

這段代碼會創建四個欄,其寬度分別是 100px200px100px200px

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

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

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

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

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

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


進階:使用 repeat()auto-fillauto-fit

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

auto-fill 的應用

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

例如:

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

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

auto-fit 的應用

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

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

在此例中,每個欄的寬度會在 150px1fr 之間自動調整,以填滿容器剩餘空間。


結語

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

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

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

Similar Posts