CSSグリッド完全解説！auto-fitとauto-fillの違いとレスポンシブ設計での正しい使い分け

auto-fitとauto-fillの違いとレスポンシブ設計での使い分け

先生と生徒の会話形式で理解しよう

生徒

「CSSグリッドでauto-fitとauto-fillって出てきましたが、何が違うんですか？」

先生

「どちらも画面サイズに合わせてレイアウトを変える仕組みですが、考え方が少し違います」

生徒

「名前が似ていて混乱します…」

先生

「棚に箱を並べるイメージで考えると、とても分かりやすくなりますよ」

1. auto-fitとauto-fillが使われる理由

CSSグリッドレイアウトでは、画面の横幅に応じて要素の並び方を自動で変えることができます。スマートフォン、タブレット、パソコンなど、画面サイズが違っても見やすくする設計をレスポンシブデザインと呼びます。

auto-fitとauto-fillは、そのレスポンシブデザインを簡単に実現するための指定方法です。特にカード一覧や商品一覧など、数が変わる要素でよく使われます。

2. repeatとminmaxの基本的な考え方

auto-fitとauto-fillは、repeatとminmaxと一緒に使われることがほとんどです。 repeatは同じ幅の列を繰り返し作る指定で、minmaxは最小幅と最大幅を決める考え方です。

難しく聞こえますが、「最低これくらいの大きさで、余ったら広がっていい」という指定だと思ってください。


<style>
.container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 10px;
}
.item {
    background: lightblue;
    padding: 20px;
}
</style>

<div class="container">
    <div class="item">BOX1</div>
    <div class="item">BOX2</div>
    <div class="item">BOX3</div>
</div>

ブラウザ表示

3. auto-fillの特徴と動き

auto-fillは、箱を並べるための「場所」を優先して確保します。中身が少なくても、置けるスペースがあれば空の枠を残します。

たとえるなら、スーパーの棚に商品が少なくても、棚そのものは消えない状態です。レイアウトの形を安定させたい場合に向いています。


<style>
.grid-fill {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 8px;
}
.box {
    background: lightgreen;
    padding: 15px;
}
</style>

<div class="grid-fill">
    <div class="box">A</div>
    <div class="box">B</div>
</div>

ブラウザ表示

4. auto-fitの特徴と動き

auto-fitは、中身のある箱だけを使ってレイアウトを広げます。空いている枠があっても、自動的に詰めて広がるのが特徴です。

こちらは、棚の商品が少ないときに、商品同士の間隔が広がるイメージです。画面いっぱいに要素を広げたいときに便利です。


<style>
.grid-fit {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 8px;
}
.card {
    background: pink;
    padding: 15px;
}
</style>

<div class="grid-fit">
    <div class="card">1</div>
    <div class="card">2</div>
</div>

ブラウザ表示