CSS Gridのauto-fitとauto-fillの違いとは？使い分けをコード付きで解説

CSS Gridの auto-fit と auto-fill は、どちらも repeat() と組み合わせて、画面幅に応じたレスポンシブなグリッドレイアウトを作るために使います。たとえば、カード一覧を「入るだけ自動で並べたい」ときに、grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); のように書きます。

結論から言うと、auto-fit は空の列を折りたたみ、既存のアイテムを広げやすい指定です。一方、auto-fill は空の列を残し、列の枠を維持しやすい指定です。実務では、カード一覧や記事一覧のように「余った幅をカードで自然に埋めたい」場合は auto-fit が使いやすく、空の列も含めてグリッドの枠を保ちたい場合は auto-fill が向いています。

1. auto-fitとauto-fillとは

auto-fit と auto-fill は、CSS Gridの repeat() 関数の中で使うキーワードです。画面幅や親要素の幅に応じて、指定した最小幅の列をできるだけ自動で並べるために使います。手動で repeat(3, 1fr) や repeat(4, 1fr) と書かなくても、コンテナ幅に合わせて列数を変えられるのが大きなメリットです。

特にレスポンシブデザインでは、スマホでは1列、タブレットでは2列、PCでは3〜4列のように、画面幅によって列数を変えたい場面がよくあります。auto-fit や auto-fill を使えば、細かいメディアクエリを書かなくても、柔軟なカードレイアウトを作りやすくなります。

1.1 repeat()と一緒に使う

auto-fit と auto-fill は、単体で使うのではなく、基本的に repeat() の中で使います。たとえば、repeat(auto-fit, minmax(240px, 1fr)) のように書きます。

この指定は、「240px以上の列を、親要素に入るだけ自動で繰り返す」という意味になります。画面が広ければ列数が増え、狭ければ列数が減ります。

1.2 minmax()と組み合わせる

auto-fit と auto-fill は、minmax() と組み合わせることが非常に多いです。minmax(240px, 1fr) と書くと、列の最小幅は240px、最大幅は残りスペースに応じて伸びるという意味になります。

この組み合わせによって、カードが小さくなりすぎるのを防ぎつつ、余ったスペースも自然に使えます。レスポンシブなカード一覧では定番の書き方です。

1.3 どちらも自動で列を作る

auto-fit も auto-fill も、親要素の幅に合わせて列を自動生成します。共通点だけを見ると、どちらも似たような見た目になることがあります。

違いが分かりやすくなるのは、親要素に余裕があり、実際のアイテム数よりも多くの列を作れる場合です。このとき、空の列をどう扱うかが auto-fit と auto-fill の大きな違いになります。

2. auto-fitとauto-fillの結論

auto-fit と auto-fill の違いを一言でまとめると、空の列を折りたたむか、残すかです。auto-fit は空の列を折りたたみ、実際に存在するアイテムを広げます。auto-fill は空の列も枠として残すため、アイテムが必要以上に広がりにくくなります。

通常のカード一覧、ブログ記事一覧、商品一覧、ギャラリーなどでは、auto-fit の方が自然に見えることが多いです。なぜなら、アイテム数が少ない場合でも、余ったスペースを既存カードが使ってくれるからです。

2.1 auto-fitは空列を折りたたむ

auto-fit は、作れるだけ列を作ろうとしますが、アイテムが入っていない空の列は折りたたまれます。その結果、実際にあるカードが横幅を広く使いやすくなります。

たとえば、親要素には4列分の余裕があるけれど、カードが2枚しかない場合、auto-fit では空の列が折りたたまれ、2枚のカードが広がって表示されます。

2.2 auto-fillは空列を残す

auto-fill は、アイテムが入っていない列もグリッド上に残します。そのため、カードが少ない場合でも、空の列のスペースが維持されます。

たとえば、親要素には4列分の余裕があり、カードが2枚しかない場合、auto-fill では残り2列分の空き枠が残るようなイメージになります。カードは必要以上に広がりにくくなります。

2.3 実務ではauto-fitが使いやすい

実務では、カード一覧を自然に広げたい場面が多いため、auto-fit がよく使われます。特に、記事カードやサービスカードの数が少ない場合でも、レイアウトが間延びしにくくなります。

一方、グリッドの列枠を維持したい、将来的に入る空きスペースも含めて配置を考えたい、カード幅を必要以上に広げたくない場合は auto-fill が向いています。

3. auto-fitとauto-fillの比較表

auto-fit と auto-fill は似ていますが、空の列の扱いが違います。以下の表で整理すると、どちらを使うべきか判断しやすくなります。

3.1 見た目の違い

カードが十分にある場合、auto-fit と auto-fill はほとんど同じ見た目になることがあります。どちらも親要素に入るだけ列を作るためです。

しかし、カード数が少ない場合は違いが目立ちます。auto-fit はカードが広がり、auto-fill は空の列を残すため、カードの横幅が変わりにくくなります。

3.2 レスポンシブでの違い

画面幅が狭いときは、どちらも列数が減ります。たとえば、スマホでは1列、タブレットでは2列、PCでは3列のように変化します。

違いが出やすいのは、画面幅が広く、アイテム数が少ないときです。広い画面でカードが少ない場合、auto-fit は横幅を活かし、auto-fill は空の列を残します。

3.3 使い分けの目安

迷った場合は、まず auto-fit を使うのがおすすめです。多くのカード一覧では、余ったスペースを自然に埋める方が見た目が整いやすいからです。

ただし、カードの幅を必要以上に広げたくない場合や、空の列も含めてグリッド構造を保ちたい場合は auto-fill を使います。

4. auto-fitの使い方

auto-fit は、レスポンシブなカードレイアウトで最もよく使われる指定の1つです。親要素の幅に合わせて列数を自動調整し、空の列を折りたたむため、カードが自然に広がります。

たとえば、ブログ記事一覧、サービス一覧、商品一覧、ギャラリーなどで使いやすいです。カード数が少なくても、横幅をうまく使って表示できるため、見た目が整いやすくなります。

4.1 基本構文

auto-fit の基本構文は、grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); です。これは、240px以上の列を、親要素に入るだけ自動で作るという意味です。

最大値に 1fr を指定しているため、余ったスペースは列に分配されます。空の列は折りたたまれるため、既存カードが広がりやすくなります。

4.2 カード一覧に向いている理由

カード一覧では、カードの数がページによって変わることがあります。3枚のときもあれば、8枚のときもあります。そのような場合、auto-fit は非常に便利です。

カード数が少ない場合でも、余った幅をカードが使ってくれるため、空白が不自然に残りにくくなります。コンテンツ量が変動するサイトに向いています。

4.3 auto-fitのコード例

以下は、auto-fit を使ってレスポンシブなカード一覧を作る例です。スマホでは1列、画面が広くなると自動で列数が増えます。

ファイル名: index.html｜言語: HTML｜用途: auto-fitを使うカード一覧のHTML

<section class="card-list">
  <article class="card">
    <h2>カード1</h2>
    <p>ここに説明文を入れます。</p>
  </article>

  <article class="card">
    <h2>カード2</h2>
    <p>ここに説明文を入れます。</p>
  </article>

  <article class="card">
    <h2>カード3</h2>
    <p>ここに説明文を入れます。</p>
  </article>
</section>

ファイル名: style.css｜言語: CSS｜用途: auto-fitでカードを自動整列する

.card-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 24px;
}

.card {
  padding: 24px;
  background: #ffffff;
  border: 1px solid #dddddd;
}

5. auto-fillの使い方

auto-fill は、親要素の中に入るだけ列を作り、アイテムが入っていない空の列も残す指定です。auto-fit と似ていますが、空の列を折りたたまない点が大きな違いです。

そのため、カードを必要以上に広げたくない場合や、グリッドの列構造を維持したい場合に使いやすいです。デザイン上、空の枠を意識したい場合にも向いています。

5.1 基本構文

auto-fill の基本構文は、grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); です。auto-fit とほぼ同じ形ですが、空の列の扱いが変わります。

アイテムが少ない場合でも、作れる列の枠が残るため、カードが必要以上に広がりにくくなります。列の枠を保ちたいときに便利です。

5.2 空列を残したい場面

auto-fill は、空の列も含めてレイアウトの構造を保ちたい場合に使います。たとえば、カードが追加される予定の枠を意識したい場合や、アイテム幅をなるべく一定に保ちたい場合です。

ただし、通常のコンテンツ一覧では、空列が残ることで余白が不自然に見えることがあります。そのため、実務では auto-fit より使用場面が限定されます。

5.3 auto-fillのコード例

以下は、auto-fill を使ったカード一覧の例です。アイテム数が少ない場合でも、空の列の枠が残りやすくなります。

ファイル名: index.html｜言語: HTML｜用途: auto-fillを使うカード一覧のHTML

<section class="card-list-fill">
  <article class="card">
    <h2>カード1</h2>
    <p>ここに説明文を入れます。</p>
  </article>

  <article class="card">
    <h2>カード2</h2>
    <p>ここに説明文を入れます。</p>
  </article>
</section>

ファイル名: style.css｜言語: CSS｜用途: auto-fillで空列を残すグリッドを作る

.card-list-fill {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 24px;
}

.card {
  padding: 24px;
  background: #ffffff;
  border: 1px solid #dddddd;
}

6. auto-fitとauto-fillの見た目の違い

auto-fit と auto-fill の見た目の違いは、アイテム数が少ないときに分かりやすくなります。たとえば、親要素には4列分の幅があるのに、カードが2枚しかない場合を考えます。

auto-fit では、空の列が折りたたまれるため、2枚のカードが広がって表示されます。一方、auto-fill では、空の列が残るため、カードは広がりすぎず、空き列のスペースが残ります。

6.1 アイテムが多い場合

アイテム数が多く、列がすべて埋まっている場合、auto-fit と auto-fill はほとんど同じ見た目になります。どちらも親要素に入るだけ列を作るためです。

そのため、最初に試したときに違いが分かりにくいことがあります。違いを確認したい場合は、カード数を少なくして広い画面で見ると分かりやすいです。

6.2 アイテムが少ない場合

アイテム数が少ない場合、auto-fit は空列を折りたたみ、既存アイテムを広げます。カードが横に伸びるため、余ったスペースを有効に使えます。

auto-fill は空列を残すため、カードは必要以上に広がりません。グリッドの枠が残るような見た目になります。

6.3 違いを確認するコード

以下のCSSで、auto-fit と auto-fill を切り替えると違いを確認できます。

ファイル名: style.css｜言語: CSS｜用途: auto-fitとauto-fillの違いを比較する

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

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

7. 実務ではどちらを使うべきか

実務では、迷ったらまず auto-fit を使うのがおすすめです。理由は、カード数が少ない場合でも余ったスペースを自然に使いやすく、見た目が整いやすいからです。

一方で、auto-fill は空列を残したい明確な理由がある場合に使います。たとえば、アイテムが追加される予定の枠を保ちたい場合や、列幅を一定に近づけたい場合です。

7.1 カード一覧ならauto-fit

ブログ記事一覧、サービス一覧、商品一覧、実績一覧などでは、auto-fit が使いやすいです。アイテム数が少ない場合でもカードが広がり、不自然な空白が残りにくいためです。

特にCMSで記事数が変わるページでは、auto-fit の方が柔軟です。記事が2件でも5件でも、親要素の幅に合わせて自然に表示できます。

7.2 枠を残したいならauto-fill

空の列も含めてグリッド構造を維持したい場合は、auto-fill が向いています。たとえば、将来的にカードが追加されるスペースを保ちたい場合です。

ただし、通常のWebページでは、空の列が見た目の余白として残ると不自然に感じることがあります。使う理由が明確なときだけ選ぶとよいです。

7.3 使い分けの結論

auto-fit は「今あるアイテムをきれいに広げたい」ときに使います。auto-fill は「空の列も含めて列構造を保ちたい」ときに使います。

SEO記事、ブログ、LP、商品一覧では、ほとんどの場合 auto-fit から試すとよいです。必要に応じて auto-fill に切り替えて比較します。

8. よくある失敗と注意点

auto-fit と auto-fill は便利ですが、使い方を間違えると思った通りのレイアウトになりません。特に、minmax() の最小幅が大きすぎる場合や、アイテム数が少ない場合に注意が必要です。

また、auto-fit と auto-fill の違いが出る条件を理解していないと、「どちらも同じに見える」と感じることがあります。違いは、空の列が発生する状況で確認すると分かりやすいです。

8.1 minmaxの最小幅が大きすぎる

minmax(320px, 1fr) のように最小幅を大きくしすぎると、スマホで横スクロールが出る可能性があります。親要素の幅より最小幅が大きいと、列が収まりにくくなるためです。

カードの最小幅は、コンテンツに合わせて決めます。一般的なカードなら、220px〜320px程度から調整すると扱いやすいです。

8.2 違いが見えないことがある

アイテム数が多く、すべての列が埋まっている場合、auto-fit と auto-fill の違いはほとんど見えません。この状態では、空の列がないためです。

違いを確認したい場合は、アイテム数を少なくして、広い画面で比較します。空列が発生したときに、違いがはっきり出ます。

8.3 失敗を防ぐコード

以下は、カードが小さくなりすぎないようにしつつ、レスポンシブに並べる基本形です。

ファイル名: style.css｜言語: CSS｜用途: minmaxとauto-fitで安定したカード一覧を作る

.card-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 24px;
}

.card {
  min-width: 0;
  padding: 24px;
}

9. auto-fitとauto-fillの覚え方

auto-fit と auto-fill は名前が似ているため、最初は混乱しやすいです。覚え方としては、auto-fit は「今あるアイテムをフィットさせる」、auto-fill は「列の枠をフィルする」と考えると分かりやすいです。

fit は空の列を折りたたみ、既存アイテムをフィットさせます。fill は空の列も含めて、グリッドの枠を埋めるように扱います。

9.1 fitはアイテムを広げる

auto-fit は、空の列がある場合、それを折りたたんで既存アイテムを広げます。つまり、今あるアイテムを親要素にフィットさせるイメージです。

カード一覧で余白を自然に埋めたい場合に向いています。実務ではこの挙動が便利なことが多いです。

9.2 fillは列を残す

auto-fill は、空の列も含めてグリッドの列を維持します。つまり、列の枠を埋める、または残すイメージです。

カードが少ない場合でも、空の列が存在するように見えるため、アイテムが広がりすぎません。

9.3 簡単な判断基準

「カードを画面幅に合わせて自然に広げたい」なら auto-fit を選びます。「空の列も含めて列構造を保ちたい」なら auto-fill を選びます。

迷ったら、まず auto-fit を使い、カードが広がりすぎると感じたら auto-fill を試すとよいです。

10. まとめ

auto-fit と auto-fill は、どちらもCSS Gridでレスポンシブな列を自動生成するために使います。共通点は、repeat() と minmax() と組み合わせることで、親要素の幅に応じた柔軟なグリッドを作れることです。

違いは、空の列の扱いです。auto-fit は空の列を折りたたみ、既存アイテムを広げます。auto-fill は空の列を残し、列構造を維持します。

10.1 実務のおすすめ

実務では、まず auto-fit を使うのがおすすめです。カード一覧、記事一覧、商品一覧、サービス一覧などでは、余ったスペースを自然に使えるため、見た目が整いやすくなります。

auto-fill は、空の列を残したい明確な理由がある場合に使います。通常の一覧レイアウトでは使用頻度はやや低めです。

10.2 最終比較

10.3 最小実務コード

最後に、実務で最も使いやすい基本コードをまとめます。カード一覧では、まずこの形から始めると扱いやすいです。

ファイル名: style.css｜言語: CSS｜用途: 実務で使いやすいauto-fitの最小構成

.card-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 24px;
}

おわりに

auto-fit と auto-fill の違いは、空の列を折りたたむか、残すかです。auto-fit は空の列を折りたたみ、今あるアイテムを広げます。auto-fill は空の列を残し、グリッドの列構造を維持します。

実務では、カード一覧や記事一覧、商品一覧のようなレスポンシブレイアウトには auto-fit が使いやすいです。アイテム数が少ない場合でも余白を自然に使えるため、見た目が整いやすくなります。

一方で、空の列を残したい、カード幅を必要以上に広げたくない、列構造を保ちたい場合は auto-fill を使います。迷ったときは、まず auto-fit を使い、実際の表示を見ながら auto-fill と比較すると、最適なレイアウトを選びやすくなります。