Webページでよく使用されるレイアウトに役立つCSS Gridの実装テクニックのまとめ

CSS Gridを使用して、Webページでよく使用されるレイアウトやコンポーネントの実装で起きる問題を解決する実装テクニックを紹介します。

Modern CSS grid solutions to common layout problems
by Kevin Pennekamp

下記は各ポイントを意訳したものです。
※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。

• はじめに
• 動的な中央揃えのレイアウト
• レスポンシブ対応のマルチコラムのグリッドシステム
• 2方向のカードレイアウト
• まとめ

はじめに

レイアウトと構成は、CSSにおいて最も難しいポイントに一つです。特にレスポンシブを考慮する場合は、なおさらです。最近では、メディアクエリを使用しない実装が増えています。これはさまざまなブレイクポイントを使用することで、CSSの保守性が低くなるからです。

しかし、CSS Gridを使用すると、メディアクエリによるこの問題を克服できます。CSSの保守性を高めるだけでなく、ユーザーエクスペリエンスも向上させます。空いているスペースは、CSSに処理させればいいのです。

この記事ではWebページのレイアウトを改善する3つの実装テクニックについて解説します。CSS Gridの2020年7月現在のサポート状況は、下記の通りです。

CSS Gridのサポート状況

動的な中央揃えのレイアウト

中央揃えにするmargin: 0 auto;は誰でも知っているでしょう。特に記事ページに最適です。しかし、画像要素を記事の最大幅より広げたい場合はどうでしょうか？

記事にネガティブマージンを使用することで実現できますが、大きなスクリーンでしか機能しません。小さなスクリーンではネガティブマージンがページのレイアウトを壊す可能性があります。特に、小さいスクリーンのスマホでは両端にパディングを与えた場合にレイアウトが壊れるかもしれません。

通常すべてのスクリーンサイズでこのレイアウトを意図した通りにするには、多くのメディアクエリを定義しなければなりません。しかし、CSS Gridを使用すると、下記のようなレイアウトを簡単に実現できます。

デスクトップでもスマホでも、画像を記事より広くして配置

記事より広い幅の画像（超幅広要素）を変更したい場合はどうすればよいでしょう？
通常であれば、多くのメディアクエリを調べて、その変更がさまざまなスクリーンサイズで機能するか検証するでしょう。

メディアクエリを使用せずに、このレイアウトが実装できるとしたらどうですか？
Article Layout with CSS Gridに、CSS Gridを使用してこのレイアウトを実現する方法が示されています。

仕組みはシンプルです。3カラムのグリッドを用意し、中央のカラムは記事のコンテンツエリアで、両端の2つのカラムはパディングとして機能し、margin: 0 auto;の効果も生み出します。

両端のパディングは、スクリーンサイズで異なる場合があります。小さなスクリーンでは無駄なスペースを少なくしたいのに対して、大きなスクリーンではスペースを多くして視覚的な品質を向上させることができます。

上記のCSSでは、メディアクエリで異なるパディングを定義する必要があります。パディングの実装にも流動性を与えてみましょう。2remをcalc(1rem + 1 * var(--ratio))に置き換えます。これで、スクリーンサイズが変化した時にメディアクエリを使用せずに、両端のパディングが自動的に変化します。
これで、記事のレイアウトが動的になり、メンテナンス性の高いものになりました。

レスポンシブ対応のマルチコラムのグリッドシステム

レスポンシブ対応のマルチコラムのグリッドとは、下記のようにスクリーンサイズに合わせてカラム数が変更させるグリッドのことです。このレイアウトの実装は、Bootstrapのグリッドシステムなどで使用する人も少なくなくないと思います。しかし、これではスクリーンサイズに対して固定のカラム数に制限されてしまいます。5つのカラムがある場合は、12カラムのシステムでは実装不可能です。その上、各要素ごとに異なるスクリーンサイズでカラムの幅を決定しなければなりません。

レスポンシブ対応のマルチコラムのグリッド

グリッドがたくさんあると、CSSやHTMLは適切にスケーリングされません。しかし幸いなことに、最近ではCSS Gridが使用できます。

CSS Gridでは、各要素のカラム幅を定義しません。カラムの数はブラウザに決定させます。以下のCSSを使用すると、上記のようなスケラーブルなレイアウトを簡単に実現できます。

このCSSを解説します。
repeat()を使用すると、引数を繰り返す必要があることをブラウザに伝えます。例えば、repeat(3, 1fr)は、スクリーン全体を占める3つの同じサイズのカラムのレイアウトを作成します。しかし、ほとんどの場合、要素には最小幅がありますが、1frでそれを崩すことができます。minmax(20rem, 1fr)は、各カラムの最小幅は20remになり、大きなスクリーンでは拡大縮小されます。

minmax()について、さらに詳しく知りたい場合は下記をご覧ください。

• minmax()を使うとMedia Queries無しでレスポンシブが簡単に実装できる

固定値をauto-fitまたはauto-fillにすると、魔法が始まります。どちらのキーワードもブラウザにカラムの数を決定させるものです。90remのスクリーンでauto-fillとminmax(20rem, 1fr)を定義すると、ブラウザは4つのカラムを作成します。auto-fitにすると、カラム数は2つ減ります。

これにより、メディアクエリを使用せずに、レスポンシブ対応のレイアウトの柔軟性が大幅に向上します。

2方向のカードレイアウト

横長の大きなスペースにまたがって、画像とコンテンツが隣り合わせになったカードレイアウトをよく見かけます。多くの場合、画像とコンテンツは一定の比率（50%:50%など）に固定されています。

スクリーンサイズを小さくすると、画像とコンテンツは隣り合わせではなく、上下に配置されます。また、利用可能なスペースを有効活用するために、比率が変更され、画像の高さは50%ではなくなります。
下記は、このコンセプトを視覚化したものです。

2方向のカードレイアウト

これはよくあることだと思いませんか？ そうです、前述した自動スケーリングのグリッドレイアウトとほとんど同じです。ちょっとした追加が1つあります。gridのclassにgrid-template-rows: auto 1fr;を追加する必要があります。

autoの値は、比率を変更して垂直方向に対応します。これは画像が横向きであることを前提としています。子要素は2つ（画像とコンテンツ）しかないので、CSS Gridが残りの部分を処理してくれます。

まとめ

CSS Gridを使用すると、レスポンシブレイアウトの問題を解決することができます。メディアクエリを使用せずに、上記を実現する方法もあります。しかし、ほとんどの場合、これらの方法は動作するためにより多くのCSSを必要とし、これらの保守が難しくなります。特に、流動性のあるCSS Grid（およびFlexbox）と組み合わせると、ブレイクポイントを気にせずにスクリーンサイズに合わせて流動的なレイアウトを作成できます。