CSS
A way to repeat the same column or row size multiple times in a grid layout.
repeat()
CSSのrepeat()
は、グリッドレイアウトを作るときに使える便利な書き方です。
本来なら「同じサイズの列」や「同じサイズの行」を繰り返し指定しないといけない場面で、この関数を使うと短く書けます。
具体例
grid-template-columns: repeat(3, 100px);
このコードは、「幅 100px の列を 3 回繰り返す」という意味です。
つまり、
grid-template-columns: 100px 100px 100px;
と同じになります。
さらに応用すると
repeat(5, 1fr)
- 幅が均等に分かれる列を5つ作る。
repeat(auto-fill, minmax(150px, 1fr))
- 画面サイズに合わせて自動的に列数を調整して並べる。
ポイント
- 「繰り返す回数」と「繰り返したい内容」の2つをセットで指定します。
- グリッドの列や行を効率的に、読みやすく書けるための仕組みです。