【Labs】CSSのGridでスマホサイト対応レイアウト

こんにちは（・∀・）

今日はdisplayプロパティの値「grid」を使ってスマホサイトにも対応したレイアウトのサンプルをご紹介します。

サンプルデモ

Result
スマホでのご確認はこちらをどうぞ

サンプルは全部で3パターンです。詳細はサンプルページをご覧ください。

HTML

<!--❶ smp1-->
<div class="grid-container smp-1">
<div class="grid-item">grid-item-1</div>
<div class="grid-item">grid-item-2</div>
<!--grid-container smp-1--></div>

<!--❷ smp2-->
<div class="grid-container smp-2">
<div class="grid-item">grid-item-1</div>
<div class="grid-item">grid-item-2</div>
<!--grid-container smp-2--></div>

<!--❸ smp3-->
<div class="grid-container smp-3">
<div class="grid-item">grid-item-1</div>
<div class="grid-item">grid-item-2</div>
<div class="grid-item">grid-item-3</div>
<!--grid-container smp-3--></div>

CSS

.grid-container {
  display: grid;
  grid-gap: 10px;
}
.smp-1,
.smp-2,
.smp-3 {
  grid-template-columns: 1fr;
}
.smp-3 .grid-item:nth-child(1) {
  order: 3;
}
.smp-3 .grid-item:nth-child(2) {
  order: 1;
}
.smp-3 .grid-item:nth-child(3) {
  order: 2;
}
@media(min-width : 600px){
.smp-1 {
  grid-template-columns: 1fr 2fr;
}
.smp-2 {
  grid-template-columns: 300px 1fr;
}
.smp-3 {
  grid-template-columns: 200px 1fr 300px;
}
.smp-3 .grid-item:nth-child(1) {
  order: 1;
}
.smp-3 .grid-item:nth-child(2) {
  order: 2;
}
.smp-3 .grid-item:nth-child(3) {
  order: 3;
}
}
.grid-container .grid-item {
  padding: 10px;
}
.grid-container .grid-item:nth-child(odd) {
  background: lightblue;
}
.grid-container .grid-item:nth-child(even) {
  background: pink;
}

親要素のgrid-containerにdisplay:gridを指定してレイアウトしています。

grid-itemとgrid-itemの間のスペースは親要素のgrid-containerにgrid-gap:10pxを指定して10pxのマージンを取っています。

grid-itemの横幅はgrid-template-columnsプロパティで指定しています。

grid-template-columnsプロパティの値には単位「fr」を使用して比率で横幅の設定をすることができます。

例：grid-template-columns: 1fr 2fr 1.5fr;
この場合、1:2:1.5
という感じです。
または、 grid-template-columns: 200px 1fr;
という感じで固定値と組み合わせることもできます。

レイアウトと言えばFlexboxだと思いますが、Gridを使ってレイアウトする方が個人的には好きかもです。

よろしければお試しください。