1. repeat関数とは何か

CSSグリッドレイアウトでは、横方向の区切りを grid-template-columns で指定します。しかし、同じ幅のカラムを何個も並べたい場合、同じ値を何度も書く必要があります。

そこで使われるのが repeat 関数です。 repeat は「同じ指定を何回繰り返すか」をまとめて書ける便利な仕組みです。

CSS、グリッドレイアウト、repeat関数、カラム定義、初心者向けCSSといった言葉は、レイアウト学習でよく検索される重要なキーワードです。

2. repeat関数を使わない書き方

まずは repeat を使わない場合を見てみましょう。同じ幅の箱を三つ横に並べたいとき、次のように書きます。


<style>
.container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
}
</style>

<div class="container">
    <div>箱1</div>
    <div>箱2</div>
    <div>箱3</div>
</div>

ブラウザ表示

この書き方でも問題はありませんが、数が増えると見づらくなります。

3. repeat関数を使った基本的な書き方

repeat関数を使うと、同じ指定をまとめて書けます。先ほどの例は、次のように書き換えられます。


<style>
.container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
}
</style>

<div class="container">
    <div>箱1</div>
    <div>箱2</div>
    <div>箱3</div>
</div>

ブラウザ表示

repeat の中の最初の数字は回数、次が幅の指定です。三回、同じ幅を繰り返すと覚えると分かりやすいです。