現代のWebデザインにおいて、CSS Grid Layoutは欠かせないレイアウト手法となりました。しかし、Gridを使いこなそうとすると、どうしても記述が冗長になりがちです。「12カラムのグリッドを作りたいのに、`1fr`を12回も書かなければならないのか？」と疑問に思ったことはありませんか？
そんな悩みを一瞬で解決し、コードを劇的に美しく、かつ保守性の高いものに変えてくれるのがCSSの『repeat()』関数です。本記事では、シニアWebデザイナーの視点から、repeat()関数の基礎から、現場で即戦力となる応用テクニックまでを詳しく解説します。
repeat()関数とは何か？
repeat()関数は、CSS Gridの`grid-template-columns`や`grid-template-rows`プロパティにおいて、繰り返しのパターンを簡潔に記述するための関数です。
例えば、4つのカラムをすべて同じ幅（1fr）で作成したい場合、通常であれば以下のように記述します。
.container {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
}
これがrepeat()を使うと、以下のように書き換えられます。
.container {
display: grid;
grid-template-columns: repeat(4, 1fr);
}
この記述により、コードの可読性が向上するだけでなく、カラム数を変更したい際にも「4」という数字を書き換えるだけで済むようになります。これは大規模なプロジェクトにおいて、メンテナンス性を飛躍的に高める要因となります。
パターンを繰り返す：複雑なレイアウトの自動化
repeat()の真骨頂は、単一の値を繰り返すことだけではありません。複数の値をセットにして繰り返すことも可能です。
例えば、サイドバー付きのレイアウトで、「固定幅のサイドバー（200px）と、残りのスペースを埋めるメインエリア（1fr）」というパターンを2回繰り返したい場合、以下のように記述できます。
.container {
display: grid;
grid-template-columns: repeat(2, 200px 1fr);
}
これにより、CSSは自動的に「200px, 1fr, 200px, 1fr」というパターンを展開します。これを知っているだけで、複雑なグリッドシステムを構築する際の工数が大幅に削減されます。
auto-fillとauto-fit：レスポンシブデザインの革命
repeat()を語る上で欠かせないのが、キーワードである`auto-fill`と`auto-fit`です。これらはメディアクエリを使わずに、要素の数やコンテナの幅に応じてレイアウトを自動調整するための魔法のような機能です。
auto-fill：空きスペースを埋める
`auto-fill`は、コンテナの幅に合わせて、可能な限り多くのカラムを詰め込もうとします。
.container {
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}
このコードは、「最低でも200pxの幅を確保し、余裕があれば1frで広がるカラムを、コンテナに入るだけ詰め込む」という意味になります。
auto-fit：要素を限界まで引き伸ばす
`auto-fit`は`auto-fill`と似ていますが、カラムが空の時にそのスペースを無視し、存在するカラムをコンテナ全体に引き伸ばします。カード型レイアウトのレスポンシブ化において、最も頻繁に使用されるテクニックです。
シニアデザイナーとして、私はカードUIの実装には迷わず`auto-fit`を推奨します。なぜなら、要素数が少ない場合でもレイアウトが崩れず、常にコンテナいっぱいに要素が配置されるため、見た目の安定感が格段に高いからです。
minmax()との強力なタッグ
先ほどから登場している`minmax()`関数は、repeat()と組み合わせることで最強のツールとなります。
`minmax(min, max)`は、その名の通り「最小値と最大値」を定義する関数です。これと`repeat(auto-fit, …)`を組み合わせると、メディアクエリを一切書かずに、ブラウザの幅に応じてカラム数が自動的に変化する「真のレスポンシブレイアウト」が完成します。
現場での実装例を挙げましょう。
.grid-container {
display: grid;
gap: 20px;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}
この一行だけで、以下のような挙動が実現されます。
1. コンテナの幅が広いときは、300px以上のカラムが横に並ぶ。
2. コンテナが狭くなり、300pxを維持できなくなると、自動的にカラムが下の段に落ちる。
3. 最後に1カラムになったときも、要素はコンテナ幅いっぱいに広がる。
この記述は、デバイスごとのブレークポイントを細かく調整する手間からデザイナーを解放してくれます。
現場で気をつけるべき「罠」とベストプラクティス
非常に便利なrepeat()関数ですが、実務で使う際にはいくつか注意点があります。
1. **gapプロパティとの併用**: repeat()を使ってカラムを並べた際、要素同士の間隔を空けるには`gap`プロパティを必ず使いましょう。マージンで調整しようとすると、計算が複雑になり、レスポンシブの挙動に悪影響を与えます。
2. **ネストされたGrid**: Gridの中にさらにGridを作る場合、親要素の幅を基準にするため、`auto-fit`の挙動が期待通りにならないことがあります。その場合は、一度コンテナの制約を見直し、適切なサイズ指定が行われているか確認してください。
3. **ブラウザサポート**: 現在、主要なモダンブラウザはすべて対応していますが、古いIE環境などが残る現場では注意が必要です。ただし、今日のWeb制作においては、Graceful Degradation（段階的劣化）の考え方に基づき、Gridを使わない古いブラウザ向けにはシンプルなブロックレイアウトをフォールバックとして用意するのが定石です。
まとめ：repeat()でデザインの自由度を高めよう
repeat()関数は、単なる「記述を省略する道具」ではありません。それは、Webデザインのあり方を「静的なレイアウト」から「流動的で適応力のあるシステム」へと進化させるための鍵です。
シニアデザイナーとして多くのプロジェクトを見てきましたが、優れたコードは例外なく「計算」ではなく「宣言」によって書かれています。「何個並べるか」を細かく指定するのではなく、「どのようなルールで並べるか」をrepeat()で定義する。この考え方にシフトすることで、あなたのCSSはより洗練され、メンテナンスしやすく、そして何より楽しいものになるはずです。
ぜひ、次回のプロジェクトから`repeat(auto-fit, minmax(…))`を積極的に活用してみてください。その圧倒的な効率の良さに、きっと驚くはずです。
Webデザインの未来は、こうした小さな関数の積み重ねから作られています。コードを書き終えた後、ブラウザのウィンドウをドラッグしてレイアウトが滑らかに変化する瞬間を、ぜひ楽しんでください。
コメント