【サンプルデモ】CSSのGridを使ったスマホサイト対応のグリッドレイアウト

サンプルはレスポンシブデザイン対応なので横幅600px以下になると1カラムになるよう設定してあります。ブラウザサイズを変更してご確認ください。

❶ smp1

4カラムのグリッドレイアウトです。親要素grid-containerの横幅に合わせて子要素grid-itemの横幅も可変します。