当サイトはJavaScriptが有効に設定されていないと正しく表示されません。【サンプルデモ】CSSのGridを使ったスマホサイト対応のグリッドレイアウト - Webデザインラボ

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

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

❶ smp1

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

grid-item-1
grid-item-2
grid-item-3
grid-item-4
grid-item-5
grid-item-6