WebDesigner's Memorandumウェブデザイナーの備忘録

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

CSS Gridの「auto-fill」と「auto-fit」の違い

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

今回はrepeat()の中で使えるauto-fillauto-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));
}

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

auto-fill

auto-fillを使うと、画面サイズを広げていったときに新たに最小値の180px分のスペースが生まれると、そこに新たな空のグリッドを生成します。

auto-fill

fill(塗り)なので、グリッドを追加できるようなスペースがあるとどんどん追加していきます。

auto-fit

auto-fitを使うと、画面サイズを広げていっても新たなグリッドは生成されません。

auto-fit

空のグリッドは生成せずに、fit(フィット)するような形で伸びていきます。

画面サイズを広げたときの微妙な違いですが、こうした違いを理解しつつ使いこなせると、少ない記述で使い勝手の良いレスポンシブ対応のレイアウトが作れます。

著者について

プロフィール画像

サイトウ マサカズ@31mskz10

1997年生まれ。2016年から専門学校でデザインについて勉強。卒業後は神戸の制作会社「N'sCreates」にウェブデザイナーとして入社。このブログでは自分の備忘録も兼ねて、ウェブに関する記事や制作環境を効率的に行うための記事を書いています。

Twitterをフォロー Facebookでいいね