CSS Grid で repeat auto-fit や minmax を使って可変サイズを実現しても余白は固定なのかあ……待てよ？ #Design

この記事の概要

CSS Grid を使うと、スクリーンの幅にあわせて列数や列サイズを可変させて、簡単にレスポンシブな実装ができます。

しかし、margin や padding、gap といった余白関連のプロパティは固定値です。

そのアンバランスさを解消すべく記事を書きました。

真面目な文章で書いていますが、半ばネタです。
メディアクエリーを書く方が早いし多分安全（意図しない表示崩れなどを引き起こしにくい）です。

解消したいこと

次のような CSS があるとします。

.some-class {
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 32px;
  padding: 32px;
  width: min(100%, 800px);
}

この時点で次のような変化をします。

それぞれのグリッドが分かりやすいように画像を敷き詰めています。
また、重要なコードのみ抜き出しているので、上記をコピー・ペーストしてもまったく同じ見た目にはなりません。

グリッドのコンテナーサイズにあわせて、中の列数も、アイテムのサイズも可変しています。
ただし、要素自体のサイズや、スクリーン幅との相対的なサイズ感は変わっているのに、余白だけがずっと固定です。

分かりやすいように 3 パターンの表示を用意しました。

1 列	2 列	3 列

padding や gap をメディアクエリー・コンテナクエリーで書けば解消できるのですが、せっかく条件分岐なしにここまで可変にできているのだから、余白も同様に処理したいわけです。

アプローチ

clamp を使います。

フォントの可変サイズに使われることが多いように思いますが、幅や高さなど様々な場所に使えます。

今回は、以下の挙動になるように書き換えてみます。

スクリーン幅が 400px 以下のとき、余白は 16px
スクリーン幅が 800px 以上のとき、余白は 32px
間のスクリーンサイズのとき、余白は 16 - 32px の間で変化する

これをコードになおすと次のようになります。

  .some-class {
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
-   gap: 32px;
+   gap: clamp(16px, 4vw, 32px);   
-   padding: 32px;
+   padding: clamp(16px, 4vw, 32px);
    width: min(100%, 800px);
  }

自分で計算しても良いですが、ジェネレーターがあるので使うと便利です。

こちらを適用すると見た目が次のように変化します。
（before の画像は先ほど載せたものと同じです）

	1 列	2 列	3 列
before
after

スクリーン幅が狭いときは余白も狭くなったことで、間延び感が減ったように思えます。

まとめ

CSS Grid で repeat auto-fit や minmax を使うとグリッドアイテムのサイズが可変になる
clamp をあわせることで余白のサイズも可変になる