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

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

❷ smp2

smp1のサンプルと同じ構成ですが子要素grid-itemに最小値・最大値を持たせたい場合、関数minmax()を関数repeat()と組み合わせれば子要素grid-itemに最小値や最大値を持たせる事もできます。

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

 

子要素grid-itemの最小値200px x 4を超えるとスクロールバーが出ます。なお子要素grid-itemの最大値は比率1になります。