【css】display:gridを使って爆速でレスポンシブ対応させよう!

はじめに
- この記事の概要
- 対象読者
GridLayoutを使ってみよう
- 完成後の画面
- GridLayoutを使おう
終わりに

はじめに

この記事の概要

こんにちは、株式会社TOKOSのスギタです！
今回はCSSのdisplay:grid;を使いレスポンシブ対応させてみようと思います。
IEのサポート対応が終了したので、これからはGridLayoutメインでレスポンシブ対応させても良いのかなと感じました。

対象読者

CSS/HTML　GridLayoutを使ってレスポンシブ対応させたい方。

GridLayoutを使ってみよう

完成後の画面

今回行っていく画面はこんな感じです。

複雑なレイアウトなどのときにかなり早く実装できるのでflexboxを使用するのも良いですが、Gridも一度使ってみてもいいと思います。
少しハードル高いなと感じると思いますが、使ってみるとかなり楽だなと感じました。

GridLayoutを使おう

GridLayoutはFlexBoxと違い2次元での指定方法になります。
概要の詳しい説明は下記になります。

参考
CSS Grid Layout を極める！（基礎編）Qiita

コードの紹介になります。
HTML

<div class="grid-container">
    <div class="grid-area1"><p>grid1</p></div>
    <div class="grid-area2"><p>grid2</p></div>
    <div class="grid-area3"><p>grid3</p></div>
    <div class="grid-area4"><p>grid4</p></div>
    <div class="grid-area5"><p>grid5</p></div>
</div>

css

p {
  color: white;
  font-size: 80px;
}

.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
  gap: 8px 8px;
  grid-template-areas:
    "grid1 grid1 grid2"
    "grid3 grid4 grid4"
    "grid3 grid5 grid5";
  min-height: 100vh;
}

.grid-area1 {
  grid-area: grid1;
  background: red;
}
.grid-area2 {
  grid-area: grid2;
  background-color: green;
}
.grid-area3 {
  grid-area: grid3;
  background-color: black;
}
.grid-area4 {
  grid-area: grid4;
  background-color: blue;
}
.grid-area5 {
  grid-area: grid5;
  background-color: blueviolet;
}

コードの解説ですが、親クラスのgrid-containerにエリアの指定をしていきます。まずは親クラスにdisplay:grid;を指定し、その次に列と行の指定です。
列: grid-template-columns
行: grid-template-rows
で指定します。
frは等分という指定方法になります。一つのエリアは等分にしてねということになります。pxなどで指定することも可能です。
gapでエリアとエリアの隙間を指定します。
grid-template-areasでエリアの箇所の指定です。ここで行いたいレイアウトを上から決めていくことができます。
上記からレスポンシブ対応させようとするとどうなるかというとgrid-template-areas内を変えてしまうだけでできます。

css

@media screen and (max-width: 500px) {
  .grid-container {
    grid-template-areas:
      "grid1 grid1 grid1"
      "grid2 grid2 grid2"
      "grid3 grid3 grid3"
      "grid4 grid4 grid4"
      "grid5 grid5 grid5";
  }
}

上記のようにgrid-template-areas内をレスポンシブ後のようにエリア指定しまえば簡単に対応することができます。
またなかなかレイアウトを考えながらプロパティを当てていくのは時間がかかるので、私はGridジェネレーターのようなものを使い実装しています。

参考
CSS Grid GeneratorLayoutit!

エリア内でドラッグして自分で好きなようにレイアウトを指定してエリア名を決め、右のHTMLとCSSをコピペするだけで実装完了です。