このページの目次

auto-fillとは？

読み方：auto-fill

最終更新：2026/08/18

3秒でわかる

CSS Gridで列数をコンテナの幅に合わせて自動で決めるキーワード。メディアクエリを書かずに折り返すカードを組めます。

もう少し詳しく

どういうものか

auto-fill は、CSS Gridの repeat() に渡すキーワードで、コンテナの幅に収まるだけのトラックを自動で作らせる指定です。minmax() と組み合わせ、1トラックあたりの最小幅と最大幅を決めておくと、画面が広いときは列が増え、狭いときは減ります。列数を数値で決め打ちしないため、レイアウトが幅の変化に自分で追従します。

なぜ必要か

従来はブレークポイントごとに列数を書き分けていました。しかしカードを置く場所はページによって幅が違い、サイドバーの有無でも変わります。画面幅を基準にした分岐は、この差を吸収できません。auto-fill は親要素の実際の幅を基準に計算するので、同じ部品をどこへ置いても破綻しません。メディアクエリの数行がそのまま消えます。

具体例

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

幅が980pxなら4列、600pxなら2列、という具合に自動で決まります。振る舞いの違いは次のとおりです。

コンテナ幅 900px / 最小幅 220px / アイテム3個

auto-fill  [item][item][item][空 ]   空のトラックを残すのでカードは伸びない
auto-fit   [ item ][ item ][ item ]  空を畳むので3個が幅いっぱいに伸びる

つまずきやすいところ

auto-fill と auto-fit の違いはアイテムが少ないときにだけ現れます。アイテムが十分あって全トラックが埋まっている状態では見た目が同じなので、開発中は違いに気づかず、データが1件しかない画面で初めてカードが横に伸びきって驚くことになります。カードの幅を揃えたいなら auto-fill、余白を残さず埋めたいなら auto-fit です。もうひとつは、最小値に 1fr は書けないという制約です。minmax() の第1引数には固定値か auto を置きます。最小幅を大きくしすぎると1列に収まらず横スクロールが出るので、最も狭い想定幅から逆算して決めます。

似た用語との違い

指定	挙動
`repeat(3, 1fr)`	常に3列。幅が狭いと潰れる
`repeat(auto-fill, minmax(220px, 1fr))`	収まる数だけ列を作り、余りは空トラック
`repeat(auto-fit, minmax(220px, 1fr))`	空トラックを畳んでアイテムを伸ばす