TailwindCSS auto-fit テクニック三選｜レスポンシブグリッドの基本と応用

TailwindCSS auto-fit でレスポンシブグリッドを作る方法をテクニック三選で解説。ブレークポイント不要のカード列数自動調整、auto-fit と auto-fill の使い分け、サイドバー+メインの不均等列幅まで実例で紹介します。

この問題、見覚えありませんか？

TailwindCSS auto-fit を使えば、ブレークポイントを書き分けなくても画面幅に応じて自動でカード列数を調整できます。ですが、知らずに grid-cols-3 で固定すると、こんな状態になりがちです。

「grid-cols-3 を指定したら、4枚目のカードだけ2行目に取り残されてしまう…」

この記事では、TailwindCSS auto-fit を中心に、レスポンシブグリッドでよくある躓きポイントを3つ紹介し、それぞれの解決策を解説します。

---

私の体験談

その前に、私の体験談を紹介させてください。

正直にお話しすると、私は今回この記事を執筆するまで、auto-fit や auto-fill を使った経験がありませんでした。今回初めてしっかり勉強したのですが、率直な感想は「公式の説明が思った以上に分かりづらい」というものでした。

auto-fit と auto-fill の説明文はほぼ同じに見えるのに、結果は全く違う。minmax(150px, 1fr) の 1fr がなぜ広がらないのか、文章を読んでも腹落ちしない。実際に手元で動かして比べないと、違いが体感できない仕様だと感じました。

同じように、何も知らない状態で「とりあえず使ってみるか」と書き始めると、自分の意図通りに結果が出ず時間が溶けていく——そんなミスを、私自身もこれから繰り返すだろうなという予感がありました。

その予感が、この記事を執筆するきっかけです。同じように悩む方の役に立てれば嬉しいです。

---

テクニック三選

テクニック1: auto-fit でカード列数を自動調整

誤解シナリオ:

読者Aさんはダッシュボードに「売上・ユーザー・注文・レビュー」の統計カード4枚を並べたいと考えました。

1. 公式ドキュメント（https://tailwindcss.com/docs/grid-template-columns）で grid-cols-3 を見つける
2. 「これだ！」と思い grid grid-cols-3 を適用
3. プレビューで確認すると、3枚は綺麗に並ぶが、4枚目が次の行にポツンと残ってしまう
4. 「ブレークポイントごとに md:grid-cols-3 lg:grid-cols-4 と書き分ければ直るけど、画面幅に応じて自動で調整できないの？」と困惑

NGパターン:

<div class="bg-slate-700 p-8">
  <div class="grid grid-cols-3 gap-4">
    <div class="bg-white rounded-lg p-6 shadow">
      <div class="text-sm text-gray-500">売上</div>
      <div class="text-2xl font-bold mt-1">¥123K</div>
    </div>
    <div class="bg-white rounded-lg p-6 shadow">
      <div class="text-sm text-gray-500">ユーザー</div>
      <div class="text-2xl font-bold mt-1">1,234</div>
    </div>
    <div class="bg-white rounded-lg p-6 shadow">
      <div class="text-sm text-gray-500">注文</div>
      <div class="text-2xl font-bold mt-1">567</div>
    </div>
    <div class="bg-white rounded-lg p-6 shadow">
      <div class="text-sm text-gray-500">レビュー</div>
      <div class="text-2xl font-bold mt-1">89</div>
    </div>
  </div>
</div>

3列固定なので、4枚目が2行目に1つだけ取り残される（3+1のいびつな配置）になります。

OKパターン:

<div class="bg-slate-700 p-8">
  <div class="grid grid-cols-[repeat(auto-fit,minmax(150px,1fr))] gap-4">
    <div class="bg-white rounded-lg p-6 shadow">
      <div class="text-sm text-gray-500">売上</div>
      <div class="text-2xl font-bold mt-1">¥123K</div>
    </div>
    <div class="bg-white rounded-lg p-6 shadow">
      <div class="text-sm text-gray-500">ユーザー</div>
      <div class="text-2xl font-bold mt-1">1,234</div>
    </div>
    <div class="bg-white rounded-lg p-6 shadow">
      <div class="text-sm text-gray-500">注文</div>
      <div class="text-2xl font-bold mt-1">567</div>
    </div>
    <div class="bg-white rounded-lg p-6 shadow">
      <div class="text-sm text-gray-500">レビュー</div>
      <div class="text-2xl font-bold mt-1">89</div>
    </div>
  </div>
</div>

4枚すべてが1行に綺麗に並びます。画面幅を変えると自動で列数が調整されるので、ブレークポイントの書き分けが不要になります。

解説:

grid-cols-[repeat(auto-fit,minmax(150px,1fr))] の中身を分解すると、以下のようになります。

パーツ	意味
repeat(...)	パターンを繰り返す
auto-fit	入るだけ列を自動で生成。空いた列は折りたたむ
minmax(150px, 1fr)	各列は最小150px、最大は均等割り（1fr）

つまり「最低でも150pxは確保しつつ、入るだけ列を増やして、余ったスペースは均等に分配する」という指示です。ブレークポイントを書かなくても、Grid 自体が画面幅を判断して列数を決めてくれます。

画面幅	NG (grid-cols-3)	OK (auto-fit min 150px)
400px	3列で潰れる	2列に自動調整
770px	3列で4枚目が孤立	4列ピッタリ
1200px	3列のままカード巨大化	7〜8列に自動調整

ポイント:

カード数や画面幅が変わっても綺麗に並べたいときは、grid-cols-[repeat(auto-fit,minmax(150px,1fr))] を使いましょう。

---

テクニック2: auto-fit と auto-fill を使い分ける

誤解シナリオ:

読者Bさんはテクニック1で auto-fit を覚えたあと、管理画面に「ステータス・通知数」の 2枚だけ のカードを並べる場面に遭遇しました。

1. 別の記事を眺めていたら repeat(auto-fill, minmax(...)) という似た書き方を見かける
2. MDN（https://developer.mozilla.org/ja/docs/Web/CSS/repeat）で auto-fill を調べる
3. 「auto-fit と説明文がほぼ同じだな…どちらでもいいか」と思い grid-cols-[repeat(auto-fill,minmax(150px,1fr))] を試す
4. プレビューを確認すると、2枚のカードが小さいまま左寄せで、右側に大きな空きスペースができてしまう
5. 「1fr で広がるはずなのに、なんで広がらないの？」と困惑

NGパターン:

<div class="bg-slate-700 p-8">
  <div class="grid grid-cols-[repeat(auto-fill,minmax(150px,1fr))] gap-4">
    <div class="bg-white rounded-lg p-6 shadow">
      <div class="text-sm text-gray-500">ステータス</div>
      <div class="text-2xl font-bold mt-1">稼働中</div>
    </div>
    <div class="bg-white rounded-lg p-6 shadow">
      <div class="text-sm text-gray-500">通知</div>
      <div class="text-2xl font-bold mt-1">3件</div>
    </div>
  </div>
</div>

コンテナに4トラック分の枠が用意され、カード2枚は左の2トラックに約165px幅で収まり、右側に2トラック分（約330px）の空きスペースが残ります。

OKパターン:

<div class="bg-slate-700 p-8">
  <div class="grid grid-cols-[repeat(auto-fit,minmax(150px,1fr))] gap-4">
    <div class="bg-white rounded-lg p-6 shadow">
      <div class="text-sm text-gray-500">ステータス</div>
      <div class="text-2xl font-bold mt-1">稼働中</div>
    </div>
    <div class="bg-white rounded-lg p-6 shadow">
      <div class="text-sm text-gray-500">通知</div>
      <div class="text-2xl font-bold mt-1">3件</div>
    </div>
  </div>
</div>

空きトラックが折りたたまれ、カード2枚がコンテナ全幅を半分ずつ均等分割（約345px幅）に拡張されます。

解説:

auto-fit と auto-fill の違いは 「アイテム数 < トラック数のときの空きトラックの扱い」 です。

キーワード	空きトラックの扱い	結果
auto-fill	残す（0pxにせず存在し続ける）	既存アイテムは minmax の範囲で配置、右側に空白が残る
auto-fit	折りたたむ（0pxに潰す）	既存アイテムが残った領域を均等分割して広がる

1fr は「実在するトラックで空きスペースを均等割りする」単位なので、auto-fill で空トラックが残ると 1fr の分母が増えてアイテムは広がりません。auto-fit なら空トラックは 0px に潰れるので、アイテムだけで均等割りされます。

つまり、使い分けは次のとおりです。

• アイテム数が少ないときに横幅いっぱいに広げたい → auto-fit
• アイテム数が増えたときに同じ幅で並べたい（カードの最大幅を保ちたい） → auto-fill

カード一覧やダッシュボードのように「アイテムを横いっぱいに広げたい」場面は auto-fit が定石です。

ポイント:

カードをコンテナの横幅いっぱいに広げて並べたいときは、auto-fit を使いましょう。auto-fill は空きスペースをトラックとして残してしまいます。

---

テクニック3: 固定幅と可変幅を組み合わせる（サイドバー + メイン）

誤解シナリオ:

読者Cさんは管理画面に「左サイドバー（ナビ） + 右メインコンテンツ」のレイアウトを作りたいと考えました。

1. テクニック1・2で auto-fit を覚えたので、そのまま再利用できると考える
2. 公式ドキュメント（https://tailwindcss.com/docs/grid-template-columns）の任意値の項を眺め、サイドバーは200pxくらいだろうと判断
3. 「これだ！」と思い grid-cols-[repeat(auto-fit,minmax(200px,1fr))] を試す
4. プレビューで確認すると、サイドバーとメインが同じ幅で均等に並んでしまう（サイドバーが大きすぎてメインが狭い）
5. 「サイドバーは200pxで止めて、メインだけ広げたいのに、200px で固定されないの？」と困惑

NGパターン:

<div class="bg-slate-700 p-8">
  <div class="grid grid-cols-[repeat(auto-fit,minmax(200px,1fr))] gap-4">
    <aside class="bg-white rounded-lg p-6 shadow">
      <div class="text-sm text-gray-500">ナビ</div>
      <ul class="mt-2 text-sm space-y-1">
        <li>ダッシュボード</li>
        <li>ユーザー</li>
        <li>設定</li>
      </ul>
    </aside>
    <main class="bg-white rounded-lg p-6 shadow">
      <div class="text-sm text-gray-500">メイン</div>
      <p class="text-base mt-2">コンテンツ本体</p>
    </main>
  </div>
</div>

minmax(200px, 1fr) の 1fr が両方の列に等しく適用され、サイドバーとメインが約345pxずつ均等に並びます。サイドバーは200pxで止まらず、メインが狭く感じます。

OKパターン:

<div class="bg-slate-700 p-8">
  <div class="grid grid-cols-[200px_1fr] gap-4">
    <aside class="bg-white rounded-lg p-6 shadow">
      <div class="text-sm text-gray-500">ナビ</div>
      <ul class="mt-2 text-sm space-y-1">
        <li>ダッシュボード</li>
        <li>ユーザー</li>
        <li>設定</li>
      </ul>
    </aside>
    <main class="bg-white rounded-lg p-6 shadow">
      <div class="text-sm text-gray-500">メイン</div>
      <p class="text-base mt-2">コンテンツ本体</p>
    </main>
  </div>
</div>

サイドバーは200pxで固定、メインは残り（約490px）を占有します。役割の違うカラムが意図通りに配置されます。

解説:

grid-cols-[200px_1fr] の構文を分解すると、以下のようになります。

パーツ	意味
200px	1列目の幅を200px固定にする
_（アンダースコア）	Tailwindの任意値内では空白の代わりに使う区切り文字
1fr	2列目は残りスペースをすべて使う（fraction = 比率の単位）

repeat(auto-fit, ...) や auto-fill は 「同じパターンの列を量産する」 仕組みなので、すべての列に同じ minmax が適用されます。サイドバーのように 役割の違う列を組み合わせたい場合 は、列ごとに値を直接書く grid-cols-[A_B] 形式が素直で確実です。

応用例も合わせて押さえておきましょう。

用途	クラス
サイドバー（左固定） + メイン	grid-cols-[200px_1fr]
メイン + サイドバー（右固定）	grid-cols-[1fr_200px]
左右サイドバー + センターメイン	grid-cols-[180px_1fr_200px]
2:1 の比率分割	grid-cols-[2fr_1fr]

ポイント:

サイドバーやヘッダーなど、固定幅と可変幅を組み合わせたいときは、grid-cols-[200px_1fr] のように列ごとの値を直接書きましょう。

---

まとめ

TailwindCSS auto-fit テクニック三選を紹介しました。

• テクニック1: カード列数を自動調整したいときは grid-cols-[repeat(auto-fit,minmax(150px,1fr))]
• テクニック2: カードをコンテナいっぱいに広げたいときは auto-fit、最大幅を保ちたいときは auto-fill
• テクニック3: サイドバー+メインのような不均等列幅は grid-cols-[200px_1fr] で直接指定

レスポンシブグリッドはブレークポイントを書き分けなくても、auto-fit と minmax の組み合わせだけで十分対応できる場面が多いです。auto-fit と auto-fill の挙動の違いを押さえて、用途に応じて使い分けましょう。この記事が、同じような悩みを持つ方の助けになれば嬉しいです。

また別の記事でお会いしましょう。

最初の一歩を踏み出したい方へ

調べても調べても、何が正解かわからない——

WEB系へスキルチェンジするため、TailwindCSSを学び始めた頃の私です。

何から始めればいいのか、見当もつかない。記事を読んでも、情報がバラバラで混乱するばかり。

それでも諦めずに、調べて、手を動かして、試し続けました。

その結果、ようやく見えてきた「最初の一歩」を、この講座にまとめました。

同じ悩みを持つ方へ、最初の一歩を照らすガイドになれば嬉しいです。

👉 TailwindCSSハンズオン講座（無料の導入記事）