CSS Gridはレスポンシブ対応のよく使うレイアウトにも便利!効果的に使用するポイントのまとめ

CSS Gridは今までに出来なかったレイアウトを実装するだけでなく、既存レイアウトをより簡単に実装する能力も備えています。サポートブラウザも十分になり、そろそろ既存レイアウトの実装方法を見直すタイミングかもしれません。

CSS Gridを使用して、3カラムや画像ギャラリーやカード型など、レスポンシブ対応のレイアウトを実装するテクニックを紹介します。

デモのキャプチャ

Common Responsive Layouts with CSS Grid
by @samsunginternet

下記は元記事のデモをピックアップしたものです。
※作者様にライセンスを得て掲載しています。

CSS Gridで実装するヒーローイメージを備えた、3カラムのレイアウト

まずは大きなヒーローイメージを備えた、3カラムのレイアウト。
レスポンシブ対応で、ヒーローイメージは常にブラウザいっぱいに表示されます。

このレイアウトでCSS Gridを使用する大きな利点は3カラム内のカードに配置された画像です。Gridで幅を制御しているため、画像は高さにあったアスペクト比を維持して表示されています。

デモのキャプチャ

デモページ

HTML

header要素とmain要素の2つで構成されており、3カラム内のカード状のarticle要素は数をいくつでも増やせます。

CSS

CSS Gridは3カラムのカードのレイアウトに使用されており、repeat()関数の最初の値はトラックの数、2番目の値はトラックの幅を定義します。
ヒーローイメージは背景にして「background-size: cover;」でいっぱいに表示し、カードは「object-fit: cover;」で画像をトリミングして表示しています。

CSS Gridで実装する画像ギャラリーのレイアウト

Flexboxで配置する時は、水平か垂直のいずれか1つの方向だけですが、CSS Gridを使用すると水平と垂直の2つの方向を制御してレイアウトすることができます。水平と垂直にまたいだセルを使用して、サイズの異なる画像を配置したギャラリーを実装します。

デモのキャプチャ

デモページ

HTML

画像はfigure要素でいくつでも配置でき、ここでは8個のfigure要素を使用します。

CSS

「grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;」で6分割した幅に画像を配置します。3カラムのテクニックと同様に、画像をセルぴったりにさせるには「object-fit: cover;」を指定します。

CSS Columnで実装するカード型レイアウト

ビューポートの幅に応じて、列を変更するカード型レイアウトです。これだけであれば、FloatやFlexboxでも可能ですが、幅・高さともにサイズが不明なカードをいっぱいに配置するには、CSS Columnが適しています。

デモのキャプチャ

デモページ

HTML

各カードはsection要素で実装されており、その中の要素の量は異なっていても問題ありません。

CSS

最初にビューポートのサイズに合わせて、column-countでカラム数と溝を定義します。この指定で、列はコンテンツでいっぱいになります。カードが複数の列に分割されるの避けるために、カードのsection要素に「break-inside: avoid;」を指定します。

CSS Gridで実装するヘッダ・フッタ付きの3カラムのレイアウト

ヘッダ、フッタ、メインコンテンツ、両側のサイドバーの4つで構成された3カラムのレイアウト、いわゆる「Holy Grail Layout(聖杯レイアウト)」は古くからあるレイアウトですが、これをCSSハック無しで実装するのは非常に困難でした。しかし、CSS Gridを使用すると、シンプルなHTMLと、クリーンなCSSで簡単に実装できます。

デモのキャプチャ

デモページ

HTML

HTMLは下記のように非常にシンプルです。サイドバーはnavとasideで、別のブロック要素にしても大丈夫です。

CSS

小さいビューポート用にFlexboxの「flex-direction: column;」で、各要素を垂直に配置しておきます。そして、大きいビューポート用にGridを使用して聖杯レイアウトを実装します。3x3のグリッドを定義し、ヘッダとフッタは上行・下行の3つを占めるようにします。

sponsors

top of page

©2018 coliss