レスポンシブデザインに対応してみる

Part 1の最後に説明したような、レスポンシブデザイン対応をしてみる。

こんな感じ。

レスポンシブ対応イメージ

ざっとまとめると、以下のようなイメージでレスポンシブに対応する。

グリッドコンテナで各エリアを定義する
定義したエリアに各グリッドアイテムを配置する
media queryでエリア名を変えずにエリアのレイアウトだけ変更する
レスポンシブ(ﾟдﾟ)ｳﾏｰ

まずはLandscapeを作る

前Partまでで説明したとおり作る（エリアを指定する方法のほうで）

DOM

<div id="main">
  <div id="board"></div>
  <div id="title"></div>
  <div id="ctrls"></div>
  <div id="score"></div>
  <div id="stats"></div>
</div>

コンテナ

#main {
  display: grid;
  grid-template-rows: 80px 1fr 100px;
  grid-template-columns: 200px 1fr;
  grid-template-areas:
    "title board"
    "stats board"
    "score ctrls";
}

アイテム

#board {
  grid-area: board;
}
#title {
  grid-area: title;
}
#ctrls {
  grid-area: ctrls;
}
#score {
  grid-area: score;
}
#stats {
  grid-area: stats;
}

media queryを使ってPortraitの方を作る

各エリアへのアイテムの配置は既に定義済みなので、コンテナのエリア定義を変更するだけでOK。

こんな感じ。

@media screen and (max-width: 480px) {
  #main {
    grid-template-rows: 100px 80px 1fr 100px;
    grid-template-areas:
      "title stats"
      "score stats"
      "board board"
      "ctrls ctrls";
  }
}

これだけでレスポンシブ対応出来る。

イメージ

デモ：https://jsfiddle.net/enj2wxp3/

次回：~~Grid Layoutの用途を考える~~何書こう・・・（Coming Soon）

CSS Grid Layoutについて調べてみた〜Part 5: レスポンシブデザイン対応してみる