横幅が広がったときの挙動が変わる！CSS Gridの「auto-fill」と「auto-fit」の違い

CSS Gridを使うとグリッドレイアウトの実装が非常にラクにできますが、その中でもrepeat()とminmax()を使うと、カードの繰り返しのようなレスポンシブレイアウトがメディアクエリを使わずに実装できます。

今回はrepeat()の中で使えるauto-fillとauto-fitの違いやそれぞれの動きについてまとめておきます。

CSS Gridの基本

CSS GridはFlexboxと同じように親要素に対して、その子要素がどんなレイアウトになるか指定します。

「grid-template-columns」で横方向のレイアウトを指定し、「grid-template-rows」で縦方向のレイアウトを指定します。

下記のように、どのサイズでレイアウトを分割するのか指定します。

.grid {
  grid-template-columns: 280px 1fr 1fr;
}

1frというのはCSS Grid特有の単位で「残りの幅いっぱい」という意味になります。
ちなみにfrは「fraction」で「割合」の意味です。

.gridの横幅が980pxだった場合、1番左カラムで280px使用して、残りは700pxになります。

1frの指定が2つあるので、この場合は均等に分けて350pxが2つのレイアウトになります。

要素の幅が変変わってもpx指定した部分は固定で、fr指定の部分は残ったサイズを分けて調整してくれるので、レスポンシブ対応が非常にラクになります。

repeat()の使い方

例えば、同じサイズのカラムを複数回繰り返すレイアウトの場合、repeat()を使うとシンプルに書けます。

最初に繰り返し回数を指定して、そのあとにカラム幅を指定して使います。

grid-template-columns: repeat(3, 280px);

同じ数字を複数回繰り返すよりもスッキリします。

また、下記のようにカラム幅を複数指定すると、280pxと380pxの指定を3回繰り返すようになります。

grid-template-columns: repeat(3, 280px 380px);

minmax()の使い方

カラム幅が固定だと、柔軟なレスポンシブ対応はできません。そこで便利なのがminmax()です。

カラム幅を指定するときに、minmax(最小値, 最大値)を指定すると、要素の幅が変わっても最小値と最大値の間でいい感じに切り替わってくれます。

grid-template-columns: repeat(3, minmax(280px, 1fr));

こうなってくると、今度は繰り返し回数部分も画面サイズに応じて変化したくなってきます。

そこで登場するのがauto-fillやauto-fitです。

auto-fillとauto-fitの違い

下記のコードを用意して動きの違いを確認します。

See the Pen Grid: auto-fill / auto-fit by Masakazu Saito (@31mskz10) on CodePen.

<h2>auto-fill</h2>
<div class="grid grid-auto-fill">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
  <div>Item 4</div>
</div>
<h2>auto-fit</h2>
  <div class="grid grid-auto-fit">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
  <div>Item 4</div>
</div>

.grid {
  display: grid;
  grid-auto-rows: 80px;
  grid-gap: 10px;
  background: #fff;
  box-shadow: 0 3px 8px rgba(0,0,0,0.15);
  margin: 10px 0 48px;
  padding: 10px;
}
.grid > div {
  display: flex;
  justify-content: center;
  align-items: center;
  background: #ccc;
}
.grid-auto-fill {
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
}
.grid-auto-fit {
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

横幅を狭めたときの動きに変化はありませんが、横幅が広がったときに挙動が変わってきます。