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

何番煎じか分からないけど、CSSのGrid Layoutについて調べてみたのでまとめてみる。

Part 1: Grid Layoutの概要
Part 2: 使い方（Grid Layoutの用語と基本）
Part 3: 使い方（グリッドコンテナ、アイテムの作り方）
Part 4: 実際にGrid Layoutを使ってみる
Part 5: レスポンシブデザイン対応してみる（イマココ）

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

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）