SYMMETRIC Web開発ブログ
レスポンシブWebデザイン、CSSフレームワークなど、Webフロントエンド開発に関するBLOGです。
※SYMMETRIC公式BLOGと統合し、ブログ名称を変更しました

CSS グリッドレイアウトでレスポンシブ対応

こんにちは、開発チームの青木です。
普段はレスポンシブと同様のマルチデバイス対応を実現する「スマホのサイト制作。PCは自動変換 | alter.js」に携わっています。

本記事は比較的新しい機能であるCSS Grid Layoutのご紹介をいたします。
CSS Grid Layoutとは、floatやflexboxと異なり、複雑な設計の入れ子構造にせずともグリッドレイアウトを構築できる新しいCSSの仕様で、CSSでのレスポンシブ対応に飛躍的な自由度を与えました。
この設定方法についてと、さらにスマホ画面の場合の対応方法もご紹介いたしします。

CSS Grid Layoutとは

CSS上でグリッドの列と行を定義することで簡単にレイアウトを二次元的にすることができる機能です。
2017年3月にはChrome, Firefox, Safari等のブラウザが対応するようになりました。
IE、Edgeで対応させるためには別途ベンダープレフィックスのプロパティを指定する必要があります。
従来のように要素を回り込ませて段組みを構成するのではなく、グリッド(格子)を定義することで、より自然なHTML構造で段組みを実現することができます。
この「グリッドでの段組み」が、レスポンシブ対応において画期的な技術になります。
各コンテンツをグリッド内に自由に配置できるようになったことで、従来のレスポンシブ対応では困難だった、コンテンツの配置順序を自由に変更することができるようになります。
この記事ではGird Layoutの基本的な使用方法をご紹介します。レスポンシブ対応のサイトをお持ちでしたら、ぜひご自身のサイトでも試してみてください。

CSS Grid Layoutの基本

まず、以下のようにラッパーとなる親要素に構造の単位を設定します。
.wrap{
    display:grid;
    grid-template-columns:1fr 1fr 1fr 4fr;
    grid-template-rows: 20px 50px 60px;
}
frという見慣れない単位ですが、これはfractionの略で、このラッパーとなる親要素をその数字の比率で分割するための単位です。
上の例でいえば2列を1:1:1:4の幅で分割しています。
この単位は、px等の他の単位と混ぜて使うことが可能です。
この設定がGrid Layoutの肝の部分です。この記述によって要素を配置するグリッドを定義しています。
そのため、レスポンシブ対応で想定するブレイクポイントで、各要素をどのような配置にするか、しっかり考えて値を設定する必要があります。
上のように親要素に「display:grid;」を設定するだけでは要素が縦に並ぶだけなので子要素にそれぞれ位置を設定する必要があります。
子要素に対するCSSの設定例が以下です。
.itm3{
    grid-row: 2; /* 2行目に表示 */
    grid-column: 2 / 5; /* 2列目から5列目の直前まで表示 */
    /* 上は下のようにも書けます。 */
    grid-column-start: 2;
    grid-column-end: 5;
}
ここで設定する値をMedia Queryなどで書き分けることで、各画面幅での表示順や配置を調整することができます。
複数列/行にわたって指定する場合、その最終列/行の数字をgrid-column-endに設定するのではなく、その次の整数を渡す必要があることにご注意ください。

CSS Grid Layoutを使用したレスポンシブ対応

PC表示等、横幅が広いデバイスであればグリッドレイアウトがかなり有効ですが、スマホ表示の場合、横幅の狭さに起因してコンテンツの文字列の長さによっては表示崩れが起こる可能性が大です。
ですので、スマホの場合メインコンテンツは1列で表示し、メニュー等の横に配置されていたものは上下に移動させる、もしくは表示を消す等の対応をすることになるでしょう。
レスポンシブ対応ということで、メディアクエリでデバイスの幅別の設定をします。
CSS Grid Layout 例
左:スマホ表示 右:PC表示
上の図のようにPCでは見出しとコンテンツを横、SPでは見出しとコンテンツを順番に縦にしたい時、それはdisplay:grid;がかなり活躍できる場面です。
今までPCでの一行ごとに要素で囲む必要があったのですが、display:grid;では親のラッパーのみあれば自由度高く配置できます。
<div class="wrap">
    <div class="ttl">見出し1</div>
    <div class="itm">コンテンツ1</div>
    <div class="ttl">見出し2</div>
    <div class="itm">コンテンツ2</div>
    <div class="ttl">見出し3</div>
    <div class="itm">コンテンツ3</div>
    <div class="ttl">見出し4</div>
    <div class="itm">コンテンツ4</div>
    <div class="ttl">見出し5</div>
    <div class="itm">コンテンツ5</div>
    <div class="ttl">見出し6</div>
    <div class="itm">コンテンツ6</div>
    <div class="ttl">見出し7</div>
    <div class="itm">コンテンツ7</div>
    <div class="ttl">見出し8</div>
    <div class="itm">コンテンツ8</div>
</div>

.wrap{
    display: grid;
    width: 100%;
    grid-auto-rows: auto;
    grid-template-columns: 20% 80%;
    border-left: solid #e7e7e7 1px;
    border-top: solid #e7e7e7 1px;
}
@media screen and (max-width: 768px) {
    .wrap{
        grid-auto-columns: auto;
    }
}
.ttl,.itm{
    padding: 0.5rem;
    color: #444;
    border-bottom: solid #e7e7e7 1px;
    border-right: solid #e7e7e7 1px;
}
.ttl{
    font-size: 18px;
    font-weight: bold;
    background-color: #ffeead;
}
.itm{
    font-size: 16px;
    background-color: #fff;
}
@media screen and (max-width: 768px) {
    .ttl,.itm{
        grid-column: 1 / 3;
    }
}

まとめ CSS Grid Layoutの使用方法について

今回の記事ではCSS Grid Layoutについてご紹介いたしました。
名前の通りグリッドレイアウトが得意ですので、モバイルファーストの時代のレスポンシブ対応に活躍できるプロパティとなるでしょう。

シンメトリックでは、レスポンシブと同様のマルチデバイス対応を実現する「スマホのサイト制作。PCは自動変換 | alter.js」を提供しています。
スマホ中心のサイト制作、リニューアルをお考えでしたら、ぜひ使ってみてください。

また、alter.jsを使用したLP制作サービス「スマホからLP制作」も展開しています。
こちらもご興味ありましたら是非お問い合わせください。

レスポンシブ対応関連記事

レスポンシブ対応のためのJavaScriptによる2つの切替手法
レスポンシブサイト用ブレイクポイント考察!時代に適するサイズとは?
レスポンシブ対応のCSSを書く前に読むべきサイト集
レスポンシブデザイン対応のテンプレートサイト10選

Page Top