CSS Tips | 超実務コアCSSテクニック：レイアウト基礎 － auto-fill / auto-fit

Web APP CSS
スポンサーリンク

auto-fill / auto-fit を理解すると「カードが自動で詰まるグリッド」が作れる

Grid の auto-fill と auto-fit は、
「画面幅に応じてカードの数を自動で増減させたい」ときの切り札です。
特に、「カードの最小幅だけ決めて、あとは勝手に並んでほしい」 というときに本領発揮します。

まずは「何をしてくれるものか」をイメージで掴んでから、CSS と Tailwind のコードに落としていきます。

基本の形：repeat() × minmax() × auto-fill / auto-fit

最小幅を決めて「入るだけ詰める」パターン

CSS でよく使う形はこれです。

.grid {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}
CSS

意味を分解するとこうなります。

minmax(200px, 1fr)
カード1枚の幅は「最低 200px、最大 1fr（余りを分け合う）」。

repeat(auto-fill, ...)
そのカードを「入るだけ横に詰めて並べる」。

結果として、
画面が広いときは 4〜5列、
狭くなると 3列、2列、最終的に 1列、
というふうに“勝手にいい感じ”に変化してくれます。

Tailwind での書き方

Tailwind には auto-fill / auto-fit 専用のクラスはないので、
任意値（arbitrary values）でそのまま書きます。

<div class="grid gap-4 [grid-template-columns:repeat(auto-fill,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 class="bg-white p-4 rounded shadow">カード4</div>
  <div class="bg-white p-4 rounded shadow">カード5</div>
</div>
HTML

この一行で「レスポンシブなカードグリッド」が完成します。

auto-fill と auto-fit の違いを感覚で掴む

ざっくりイメージ

どちらも「入るだけカラムを作る」のですが、
余ったスペースの扱いが少し違います。

auto-fill
「カラムの“枠”は埋めたまま。中身がなくても列としてカウントする」

auto-fit
「中身がないカラムは畳んで、残っている要素を広げる」

実際の違いが見えやすいのは、
「カードの数が少ないとき」です。

例1：auto-fill を使ったカードグリッド

CSS 版

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

画面が広いとき、
「本来なら 4枚入る幅だけど、カードは3枚しかない」
という状況だと、見えない“空のカラム”が1つ分あるイメージになります。

その結果、
カードは「最小幅 200px を保ちつつ、左側に寄りがち」な見え方になります。

Tailwind 版

<div class="grid gap-4 [grid-template-columns:repeat(auto-fill,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

例2：auto-fit を使ったカードグリッド

CSS 版

.grid-fit {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
CSS

同じ HTML で、auto-fill を auto-fit に変えるだけです。

<div class="grid-fit">
  <div class="card">カード1</div>
  <div class="card">カード2</div>
  <div class="card">カード3</div>
</div>
HTML

今度は、
「空のカラムは畳んでしまう」ので、
カード3枚が“残りのスペースを全部分け合って”広がります。

見た目としては、
カードが横にびよーんと広がって、
「常に横幅いっぱいを使う」印象になります。

Tailwind 版

<div class="grid gap-4 [grid-template-columns:repeat(auto-fit,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

どっちを使うべきかの判断基準

カードの幅を「ある程度一定に保ちたい」なら auto-fill 寄り

カードの最小幅を守りつつ、
「カードの幅があまり変わらない」方がいい場合は、
auto-fill の方が落ち着いた見た目になります。

カードの数が少ないときも、
カードがあまり横に伸びすぎません。

カードの数が少ないときに「横幅いっぱいに広がってほしい」なら auto-fit 寄り

例えば、
「1枚だけのときは横幅いっぱいにドーンと見せたい」
というようなデザインなら、auto-fit が向いています。

実践テンプレート：レスポンシブカード一覧（auto-fit 推し）

実務で一番使いやすいのは、
auto-fit + minmax(カードの最小幅, 1fr) の組み合わせです。

Tailwind 版

<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 [grid-template-columns:repeat(auto-fit,minmax(240px,1fr))]">
    <article class="bg-white p-5 rounded-xl shadow flex flex-col gap-3">
      <h3 class="text-lg font-semibold">記事タイトル1</h3>
      <p class="text-sm text-gray-600">概要テキストが入ります。</p>
      <button class="mt-auto self-start text-sm text-blue-600">続きを読む</button>
    </article>
    <article class="bg-white p-5 rounded-xl shadow flex flex-col gap-3">
      <h3 class="text-lg font-semibold">記事タイトル2</h3>
      <p class="text-sm text-gray-600">概要テキストが入ります。</p>
      <button class="mt-auto self-start text-sm text-blue-600">続きを読む</button>
    </article>
    <article class="bg-white p-5 rounded-xl shadow flex flex-col gap-3">
      <h3 class="text-lg font-semibold">記事タイトル3</h3>
      <p class="text-sm text-gray-600">概要テキストが入ります。</p>
      <button class="mt-auto self-start text-sm text-blue-600">続きを読む</button>
    </article>
  </div>
</section>
HTML

ここでのポイントは、
「カードの最小幅（240px）だけ決めて、あとは画面幅に任せる」
という割り切り方です。

minmax(最小, 最大) の「最小幅」がめちゃくちゃ重要

auto-fill / auto-fit を使うとき、
本当に大事なのは minmax() の「最小値」です。

最小値が小さすぎると
スマホでカードが細長くなりすぎて読みにくくなります。

最小値が大きすぎると
すぐに 1 カラムになってしまい、
「2カラムで見せたい幅」でも 1 カラムになってしまいます。

よく使う感覚値としては、
カードなら 200〜280px あたりがバランス良いことが多いです。

まとめ

auto-fill / auto-fit は、
「カードの最小幅だけ決めて、あとは Grid に任せる」ための仕組みです。

CSS の基本形はこう。

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

Tailwind ならこう。

<div class="grid gap-6 [grid-template-columns:repeat(auto-fit,minmax(240px,1fr))]">
HTML

auto-fill
「カラムの枠はそのまま、カードの幅はあまり変えたくない」

auto-fit
「空のカラムは畳んで、カードを広げて見せたい」

この感覚だけ掴んでおけば、
あとは minmax() の最小幅を調整するだけで、
かなり気持ちいいレスポンシブグリッドが作れるようになります。

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