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

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

❶ smp1

可変幅の2カラムレイアウトです。親要素の横幅に合わせて2カラムとも可変します。

grid-item-1
grid-item-2

 

❷ smp2

可変幅の2カラムレイアウトです。grid-item-1は300px固定で、親要素の横幅に合わせてgrid-item-2だけ可変します。

grid-item-1
grid-item-2

 

❸ smp3

grid-item-1が200px、grid-item-3は300px固定でgrid-item-2が可変幅の3カラムレイアウトです。親要素の横幅に合わせてgrid-item-2だけ可変します。

また、orderプロパティでスマホサイトで表示された時のgrid-itemの表示順を変更してあります。

grid-item-1
grid-item-2
grid-item-3

 

以上のサンプルをレイアウトの基本形として応用してみてください。