CSS

A way to repeat the same column or row size multiple times in a grid layout.

repeat()

CSSのrepeat()は、グリッドレイアウトを作るときに使える便利な書き方です。

本来なら「同じサイズの列」や「同じサイズの行」を繰り返し指定しないといけない場面で、この関数を使うと短く書けます。

具体例

CSS

grid-template-columns: repeat(3, 100px);

このコードは、「幅 100px の列を 3 回繰り返す」という意味です。

つまり、

CSS

grid-template-columns: 100px 100px 100px;

と同じになります。

さらに応用すると

repeat(5, 1fr)
幅が均等に分かれる列を5つ作る。
repeat(auto-fill, minmax(150px, 1fr))
画面サイズに合わせて自動的に列数を調整して並べる。

ポイント