CSS Grid repeat function

此篇介紹 repeat function 的使用，在 grid 中可以減少一些重複設定的瑣碎動作

Demo | Github

repeat 這方法可以減少重複設定，如下的 grid-template-columns 設定了四欄

.container {
    display: grid;
    grid-gap: 20px;
    grid-template-columns: 1fr 1fr 1fr 1fr;
}

上述的方式使用 repeat 可以轉寫成 repeat(4,1fr) ，第一個參數表示重複次數，第二個參數為設定大小

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

所以當參數設定多個大小時，表示此 column 或 row 按照設定大小的數量去重複，如以下設定了 1fr auto 表示設定 2 columns ，然後此 2 columns 重複兩次

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

repeat()

The repeat() CSS function represents a repeated fragment of the track list, allowing a large number of columns or rows that exhibit a recurring pattern to be written in a more compact form.

This function can be used in the CSS Grid properties grid-template-columns and grid-template-rows.
資料來源 - MDN

ShunNien's Blog

CSS Grid 筆記 08-CSS Grid Repeat Function

CSS Grid repeat function

repeat()

參考資料