【サンプルデモ】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の大きさに沿ってカラム数が変わります。