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

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

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

❸ smp4

「grid-template-columns」は横並びを制御しますが、縦並びの大きさの制御は「grid-template-rows」で行います。

grid-item-1
grid-item-2
grid-item-3
grid-item-4
grid-item-5
grid-item-6
grid-item-7
grid-item-8
grid-item-9
grid-item-10
grid-item-11
grid-item-12

 

縦は最終的に6段にしますので「grid-template-rows」に6つのサイズを指定します。

ちなみに縦の値6段全てを100pxなどの絶対値で指定するとgrid-itemが縦に6段揃って無い状態の場合でも6段分のスペースが取られます。