CSS Tips | 超実務コアCSSテクニック：レイアウト基礎 － repeat関数

Web APP CSS
スポンサーリンク

repeat 関数を理解すると「同じパターンのカラム・行」が一瞬で書ける

repeat() は CSS Grid 専用の関数で、
「同じ定義を何回も書くのを省略するためのショートカット」 です。

grid-template-columns: repeat(3, 1fr);
/* = 1fr 1fr 1fr と同じ意味 */
CSS

「3カラム全部 1fr」「4行全部 100px」みたいなときに、
コードを短く・読みやすくしてくれます。

Tailwind CSS でも、grid-cols-3 のようなユーティリティが
内部的には repeat() 的な考え方に対応しています。

repeat の基本構文とよくあるパターン

基本構文

repeat(回数, パターン)
CSS

回数
何回繰り返すか（数値 or auto-fill / auto-fit）

パターン
繰り返したいトラック（1fr, 100px, minmax(…) など）

均等カラムを作る（3カラム・4カラムなど）

CSS 版

.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.grid-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
CSS
<div class="grid-3">
  <div>1</div><div>2</div><div>3</div>
</div>

<div class="grid-4">
  <div>1</div><div>2</div><div>3</div><div>4</div>
</div>
HTML

Tailwind 版

<div class="grid grid-cols-3 gap-4">
  <div class="bg-gray-100 p-4 rounded">1</div>
  <div class="bg-gray-100 p-4 rounded">2</div>
  <div class="bg-gray-100 p-4 rounded">3</div>
</div>

<div class="grid grid-cols-4 gap-4 mt-6">
  <div class="bg-gray-100 p-4 rounded">1</div>
  <div class="bg-gray-100 p-4 rounded">2</div>
  <div class="bg-gray-100 p-4 rounded">3</div>
  <div class="bg-gray-100 p-4 rounded">4</div>
</div>
HTML

Tailwind の grid-cols-3 / grid-cols-4 は、
「repeat(3, minmax(0, 1fr)) っぽいもの」と思ってOKです。

repeat × minmax で「柔軟なグリッド」を作る

最小幅を決めたカードグリッド（固定列数）

CSS 版

.cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(200px, 1fr));
  gap: 20px;
}
CSS
<div class="cards">
  <div class="card">カード1</div>
  <div class="card">カード2</div>
  <div class="card">カード3</div>
</div>
HTML

各カラムは「最低 200px、最大 1fr」で、
3カラム分を repeat しています。

Tailwind 版（任意値）

<div class="grid gap-5 [grid-template-columns:repeat(3,minmax(200px,1fr))]">
  <div class="bg-white p-4 rounded shadow">カード1</div>
  <div class="bg-white p-4 rounded shadow">カード2</div>
  <div class="bg-white p-4 rounded shadow">カード3</div>
</div>
HTML

repeat × auto-fill / auto-fit との組み合わせ

「入るだけ詰める」レスポンシブカード

CSS 版

.cards-auto {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
CSS
<div class="cards-auto">
  <div class="card">1</div>
  <div class="card">2</div>
  <div class="card">3</div>
  <div class="card">4</div>
</div>
HTML

画面幅に応じて
1〜4カラムに自動で変化します。

Tailwind 版

<div class="grid gap-4 [grid-template-columns:repeat(auto-fit,minmax(220px,1fr))]">
  <div class="bg-white p-4 rounded shadow">1</div>
  <div class="bg-white p-4 rounded shadow">2</div>
  <div class="bg-white p-4 rounded shadow">3</div>
  <div class="bg-white p-4 rounded shadow">4</div>
</div>
HTML

ここでのキモは、
「repeat の“回数”に auto-fit / auto-fill を使う」ことです。

行方向にも repeat は使える

固定高さの行を複数作る

CSS 版

.grid-rows {
  display: grid;
  grid-template-rows: repeat(3, 80px);
  grid-template-columns: 1fr;
  gap: 8px;
}
CSS
<div class="grid-rows">
  <div class="bg-gray-100">行1</div>
  <div class="bg-gray-100">行2</div>
  <div class="bg-gray-100">行3</div>
</div>
HTML

Tailwind には grid-rows-3 のようなプリセットはありますが、
高さを指定したい場合は任意値を使います。

Tailwind 版

<div class="grid [grid-template-rows:repeat(3,80px)] gap-2">
  <div class="bg-gray-100 p-2">行1</div>
  <div class="bg-gray-100 p-2">行2</div>
  <div class="bg-gray-100 p-2">行3</div>
</div>
HTML

repeat を「戦略的に」使うポイント

同じパターンが続くときは、まず repeat を疑う

例えば、

grid-template-columns: 1fr 1fr 1fr 1fr;
CSS

と書きたくなったら、
「これ repeat で書けるな」と一度立ち止まるクセをつけると、
CSS がかなり読みやすくなります。

grid-template-columns: repeat(4, 1fr);
CSS

の方が「4カラムの均等グリッド」と一目でわかります。

「列数を変えたいとき」にも強い

3カラム → 4カラムに変えたいとき、
repeat を使っていれば数字を1つ変えるだけです。

grid-template-columns: repeat(3, 1fr);
/* ↓ */
grid-template-columns: repeat(4, 1fr);
CSS

Tailwind なら

grid-cols-3
/* ↓ */
grid-cols-4
HTML

という感じで、
「列数の変更」がとても簡単になります。

実践テンプレート：サービスカードの 3 / 4 カラム切り替え

<section class="max-w-6xl mx-auto px-4 py-10">
  <h2 class="text-2xl font-bold mb-6">サービス一覧</h2>
  <div class="grid gap-6 md:grid-cols-3 lg:grid-cols-4">
    <div class="bg-white p-5 rounded-xl shadow">カード1</div>
    <div class="bg-white p-5 rounded-xl shadow">カード2</div>
    <div class="bg-white p-5 rounded-xl shadow">カード3</div>
    <div class="bg-white p-5 rounded-xl shadow">カード4</div>
    <div class="bg-white p-5 rounded-xl shadow">カード5</div>
    <div class="bg-white p-5 rounded-xl shadow">カード6</div>
  </div>
</section>
HTML

ここでは Tailwind の md:grid-cols-3 / lg:grid-cols-4 を使っていますが、
頭の中では「repeat(3, 1fr) → repeat(4, 1fr) に変わっている」とイメージできると、
Grid の理解が一段深くなります。

まとめ

repeat 関数は、Grid レイアウトで

  • 同じ幅のカラム・行を繰り返す
  • minmax や auto-fit / auto-fill と組み合わせて柔軟なグリッドを作る
  • 列数の変更を簡単にする

ための“省力化ツール”です。

CSS では

grid-template-columns: repeat(3, 1fr);
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
CSS

Tailwind では

grid-cols-3
[grid-template-columns:repeat(auto-fit,minmax(220px,1fr))]
HTML

のように使えます。

「このカード一覧、何カラムにするか迷っている」「repeat と auto-fit を組み合わせたい」みたいな具体的なケースがあれば、そのデザイン前提で一緒にベストな repeat の書き方を決めていこう。

スポンサーリンク
タイトルとURLをコピーしました