ECで使えるCSS Grid

はじめに

• ECのランディングページを作成しているとよくあるのが商品の羅列です。その際にgridをよく使いますが、レスポンシブデザインをできるだけメディアクエリを使わずに構成したいので、コードを少なくする小技をメモとして書きました。
• コリスさん他、多数の方がgridの便利な使い方として紹介されていましたので、参考にさせていただいたものを自分なりにアレンジしたものになります。
• もっと簡単にできるよ、ということでしたらぜひ教えてくださいm(__)m

条件とコード

• 以下の条件で作りたい場合
  • コンテナのMAX幅は1000pxで最大4列作りたい
  • レスポンシブ対応で画面幅に合わせて列数を変えたい
  • スマホサイズでは2列で表示したい
  • 列同士の間は16px開けたい
  • 極力メディアクエリは使いたくない（コードが増えるから）

<div class="container">
  <!-- 複数要素 -->
</div>

.container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(calc(50% - 8px), calc((1000px - 16px * 3) / 4)), 1fr));
  gap: 16px;
}

コード説明

• repeat
  • 商品を羅列したいので同じ幅を繰り返します。
• minmax(~, 1fr)
  • 最小値と最大値を指定します。最大値に1frを指定して柔軟に幅を対応させています。（単位frとは）
• min(calc(50% - 8px), calc((1000px - 16px * 3) / 4)
  • 上記の条件の場合、画面サイズが491px以下になるとcalc(50% - 8px)、492px以上でcalc(1000px - 16px * 3) / 4が適用されます。コンテナの最大幅から要素間の余白分を引き、最大で4列表示したいので4分割しています。
  • calc(50% - 8px)を単純に50%としてしまうとスマホサイズになったときにminmax(50%, 1fr)となり、gapで指定した16px分が確保できなくなります。そのため50%が適用されず、1frが適用されカラムが1列になってしまいます。minmax(calc(50% - 8px), 1fr)を適用させることでgapの16px分が確保され、スマホサイズでカラム2列になります。minmaxの特性については、コリスさんがminmaxのバリデーションで詳しく書かれています。

gapによって余白を設けない場合は、calc(50% - 8px)を使用せず単純に50%でOK

おわりに

• 商品の羅列にはflexも有効ですが、コードが増えがちです。（私見ですが・・・）
• 今回のgridは少ないコードでレスポンシブ対応もできるのでかなりオススメです。
• もしここ間違ってるよ、ということでしたらぜひ教えてください。