【サンプルデモ】CSSのGridを使ったスマホサイト対応のグリッドレイアウト
サンプルはレスポンシブデザイン対応なので横幅600px以下になると1カラムになるよう設定してあります。ブラウザサイズを変更してご確認ください。
❸ smp5
これまでは縦横同率のgrid-itemを配置してきましたが、ある特定のgrid-itemだけサイズを変えたい、という場合は「grid-column」と「grid-row」を使用します。
「grid-column」と「grid-row」の値の書き方は縦横のグリッドラインの「始まりのグリッドライン / 終わりのグリッドライン」というような指定方法になります。例えば横をグリッドラインの1番目から3番目を指定する場合「grid-column: 1 / 3;」、縦をグリッドラインの3番目から5番目を指定する場合「grid-row: 3 / 5;」というような書き方になります。
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
1つ目のgrid-itemの縦を2倍の大きさ、6つ目のgrid-itemは横に2倍の大きさ、8つ目のgrid-itemを縦横2倍の大きさにします。