簡単すぎてびっくり！CSSグリッドをレスポンシブデザインに活用するための詳細手順を紹介

Webデザインを行う際に、複数の閲覧 デバイス を想定してデザインを行うのは今では当たり前になっています。 オンライン でのWeb ページ の閲覧の4分の3はモバイルなので、モバイルでも快適に閲覧できるように、デザインを考えていかなければなりません。

Webデザインで段組を行う手法はさまざまありますが、現時点で最も手っ取り早いのは CSS グリッドを利用する方法です。 CSS グリッドは見た目の段組を想定してコーディングできるので、より直感的な段組を行うことができます。

そこで今回は、 CSS グリッドをレスポンシブデザインに活用するための詳細手順を紹介していきます。何かと概念的な CSS グリッドですが、ここでレスポンシブ対応するにはどうすればよいか、まとめておきましょう。

CSS グリッドでレスポンシブデザインを実装しよう

イメージ画像

floatやflexboxのような「1次元」 レイアウト に対して、「2次元 レイアウト 」と呼ばれる CSS グリッドを使った レイアウト を使うと、デザイナーはより直感的にデザインできます。

参考：
これで分かった！10分でほとんど理解できる「CSSグリッド」の基礎

しかし、 CSS グリッドを使っても使わなくても、レスポンシブデザインに対応させるのは骨の折れる作業には変わりありません。ブレイクポイントを設定して、複数の レイアウト を考えなければならないからです。その時に、Webデザインでの段組みに慣れていないと、コードを見るたびに混乱してしまう自体が発生します。

イメージ画像

ただ、 CSS グリッドは従来の レイアウト 手法よりはスムーズに段組みを行えるはずです。穴の空いたパズルにブロックを当てはめる感覚なので、慣れればこちらのほうが素早くデザインできます。

レスポンシブデザインに対応させるには「media queries」(メディアクエリ)を使う手法が一般的ですが、今回はそれ以外のアプローチもご紹介していきます。

media queriesを使う手順

イメージ画像

レスポンシブデザインでWebサイトを作成する場合、最も簡単な方法はモバイル レイアウト を先に作っていくことです。グリッドコンテナの中に入れていくグリッドアイテムが、 CSS グリッド適用前だと縦1列に並ぶので、イメージしやすいからです。

1カラムで横幅を最大まで広げるには、gridクラスを指定したdiv タグ に対して、下記の CSS を指定すればOKです。

grid {
　　display: grid;
　　grid-template-columns: 1fr;
}

必要なのはたったの4行です。もしグリッド間に空間を開けたい場合、「margin」や「padding」プロパティを指定するよりも、「grid-gap」プロパティを加えたほうがシンプルでしょう。画像を横幅ぴったりに表示させる場合は、子要素の画像に「object-fit: cover;」を指定します。

デスクトップでは、シングルカラムではなくマルチカラムになることが多いでしょう。その際に、media queriesを使って最低幅となるブレイクポイントを指定します。

@media (min-width: 40em) {
　　.grid {
　　　　grid-template-columns: 2fr 1fr;
　　}
}

この際に注意しておきたいことをいくつか挙げてみましょう。まず、ブレイクポイントはpixelおよびrem指定よりもem指定の方が好ましいです。これはPX, EM or REM Media Queries?に詳しく書かれていますが、以下の参考記事で和訳されています。

参考：
CSSMedia Queriesで使う単位はpx, em, remのどれが適しているか検証 -px指定は注意が必要 | コリス

また、デスクトップ画面での表示で、Gridアイテムをバラバラにしたい場合は、細心の注意を払いましょう。 コンテンツ を入れ替えて表示する最も簡単な方法は、

(1) 「グリッドに名前をつける」
(2)「グリッドに
                  コンテンツ
                を挿入する」という方法です。

例えば、デスクトップ画面で「1:2:1」の幅で表示する場合、media queriesは以下のように指定します。

@media (min-width: 40em) {
　　.grid {
　　　　grid-template-columns: 1fr 2fr 1fr;
　　　　grid-template-areas:
　　　　　　"header header menu"
　　　　　　"navigation content ad"
　　　　　　"footer footer footer";
　　}
}

続いて、グリッドに コンテンツ を挿入していきます。グリッドの名前がすでに「grid-template-areas」プロパティで付けられていれば、あとは簡単です。

.header {
 　　grid-area: header;
}

.menu {
　　grid-area: menu;
}

// 以下同様

これで、 CSS グリッドをmedia queriesで切り替えることが可能になります。

auto-fitを使う手順

コンテンツ の入れ替えが必要な場合はmedia queriesを利用するのが一般的ですが、 ブログ の記事一覧のようにグリッドアイテムの順番を変える必要がない場合は、media queriesを使わずに レイアウト を整えることも可能です。

これを実現するには、グリッドコンテナの「grid-template-columns」プロパティに、「repeat(auto-fit, [ブレイクポイント])」を指定します。この場合、「repeat」関数でブレイクポイントを複数指定しているので、例えばブレイクポイントに10emを指定すれば、10em・20em・30em…と増えていきますが、ブレイクポイントを1箇所だけにしたい場合は「repeat」関数を取り外します。

grid {
　　display: grid;
　　grid-template-columns: repeat(auto-fit, 10em);
}

これで、10emの倍数をブレイクポイントとして、幅が変わるごとに コンテンツ の数が変わります。

media queries内で コンテンツ を流していく方法は、ある程度「固定」された レイアウト となりますが、auto-fitはリキッド レイアウト に近いと言えます。どちらがいいということではなく、適材適所で臨機応変に使い分けていただくとよいでしょう。

まとめ

CSS グリッドに関するプロパティは少し長いので、非常に面倒に感じるかもしれません。しかし、レスポンシブデザインへの対応は非常に簡単であることがご理解いただけたでしょう。

一時期flexboxも流行しましたが、 CSS グリッドはflexboxの持つ課題も解決しているので、今後の CSS グリッドはWebデザイナーの必須技術となります。仕組みを理解して、デザインに活かしていきましょう。