CSSグリッドレイアウト入門！repeat関数を使ってカラムを簡潔に定義する方法

1. repeat関数とは何か

1. repeat関数とは何か

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

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

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

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

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関数を使った基本的な書き方

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 の中の最初の数字は回数、次が幅の指定です。 三回、同じ幅を繰り返すと覚えると分かりやすいです。

4. repeat関数は何が便利なのか

4. repeat関数は何が便利なのか

repeat関数の一番のメリットは、コードが短くなり、読みやすくなる点です。 あとから見返したときも、何列あるのかがすぐ分かります。

特に初心者のうちは、見た目とコードの対応関係が大切です。 repeat を使うことで、レイアウトの構造を頭の中で整理しやすくなります。

同じ指定を何度も書かなくて済むため、間違いも減らせます。

5. マス目のイメージで理解しよう

5. マス目のイメージで理解しよう

repeat関数は、ノートに同じ大きさのマスを並べるイメージとよく似ています。 三つ同じマスを描きたいとき、毎回同じサイズを書くのは大変です。

「この大きさのマスを三つ並べる」とまとめて考える方が楽になります。 repeat関数は、その考え方をそのままCSSにしたものです。

CSSグリッドレイアウトとrepeat関数を覚えることで、 初心者でも整ったページ構成を作りやすくなります。