CSS Gridを使う前に知っておきたい、floatやflexboxなど既存の実装にどのような影響を与えるか

CSS Gridは先日リリースされたChrome 57がサポートし、デスクトップ用のすべてのブラウザで利用できるようになりました。

floatやflexbox、vertical-alignやinline-blockなど、Webページでよく使用するレイアウトの実装に、CSS Gridがどのような影響を与えるかについて紹介します。

サイトのキャプチャ

Grid “fallbacks” and overrides


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

CSS Gridを使う時の注意点

CSS Gridでは、グリッドが他のレイアウト手法と相互に作用する方法が定義されています(Grid Containers)。これらの定義はアイテムがGridアイテムになると、古いブラウザのために使用したビヘイビアが上書きされることを意味します。つまり、コードをフォークして、2つのバージョンを作成する必要はありません。
古いブラウザ用のCSSを上書きする必要がある場合は、CSS Feature Queries内に記述できます。これにより、CSS Grid対応ブラウザのみに適用させることができます。

CSS Gridで、floatやflexbox、vertical-alignやinline-blockなど他のレイアウト手法をどのように上書きするかシンプルなデモと一緒に確認しておきましょう。

CSS Gridとfloat

CSS Grid非対応ブラウザでアイテムをfloatさせた場合、そのアイテムがGridアイテムになると、floatは何の効果もなくなります。もちろん、そのアイテムに適用されたclearプロパティも無効になります。
floatとclearは、Gridアイテムに影響しません。

See the Pen Grid Overrides: floated item by rachelandrew (@rachelandrew) on CodePen.

CSS Gridとdisplay: inline-block;

「display: inline-block;」に関連するプロパティは、アイテムがGridアイテムになったら無効になります。
インラインブロックに設定されたアイテムは、Gridアイテムになります。

See the Pen Grid Overrides: inline-block item by rachelandrew (@rachelandrew) on CodePen.

CSS Gridとdisplay: tableプロパティ

フォールバックとしてレイアウトのためにdisplayでtableプロパティを使用している場合、例えば「display: table-cell;」を使用すると、匿名ボックスが生成されます。これらのボックスは欠けたテーブル要素になります。アイテムがGridアイテムになると、このボックスの生成は行われないため、匿名ボックスは生成されません。
「display: table-cell;」にセットされたアイテムは、匿名ボックスを生成しません

See the Pen Grid Overrides: display: table-cell by rachelandrew (@rachelandrew) on CodePen.

CSS Gridとvertical-alignプロパティ

「display: inline-block;」または「display: table-cell;」を使ったアイテムは、「vertical-align」プロパティを使用して整列させることができます。これらのアイテムがGridアイテムになると、このプロパティは無効になり、アイテムを整列させるためにBox Alignmentプロパティを使用します。
「vertical-align」は、Gridアイテムに影響を与えません。

CSS Gridとcolumnプロパティ

CSS Gridで合理的なフォールバックは、多くのブラウザにサポートされているMulti-columnレイアウトを使用することです。コンテナがMulti-columnレイアウトのプロパティを使用し、Gridレイアウトになると、それらはレイアウトに適用されなくなります。
Multi-columnレイアウトモジュールの「column-*」プロパティはGridコンテナに影響を与えません。

CSS Gridとflexbox

flexboxは、CSS Gridよりも優れたブラウザサポートを備えているため、フォールバックレイアウトに効果的に使用できます。この2つの仕様はどちらもBox Alignmentプロパティに対応しています。つまり、flexboxでソリッドなレイアウトを作成し、小さなグリッドを適用して大きな変更を加えることなく、うまく処理できます。
FlexアイテムはGridアイテムになり、Box Alignmentプロパティはそのまま適用されます

See the Pen Grid Overrides: flexbox layout by rachelandrew (@rachelandrew) on CodePen.

CSS Gridとアイテムの幅指定

従来のレガシーなレイアウトでは通常、アイテムに幅を指定する必要がありました。flexboxで実装したグリッドも、個々のアイテムに幅を指定する必要があります。
CSS Gridはグリッドを定義することでレイアウトを構築し、アイテムの幅を明示的に指定するのは望ましくないことがよくあります。幅は通常、@supportsブロック内で上書きする必要があります。幅をautoに指定すると、そのトリックが実行されます。幅を%で指定されたアイテムは、Gridコンテナではなくトラックの幅からパーセントが算出されます。
フォールバックレイアウトに適用される幅に意図しない結果が生じることがあります。

その他の参考リソース

top of page

©2017 coliss