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

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

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

❸ smp3

カラム数を固定したくない場合は「auto-fit」を使用します。レスポンシブデザインで親要素grid-containerの大きさに合わせて子要素grid-itemのカラム数を変更したい場合有効です。

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

 

親要素grid-containerと子要素grid-itemの大きさに沿ってカラム数が変わります。