57がサポートし、デスクトップ用のすべてのブラウザで利用できるようになりました。Gridがどのような影響を与えるかについて紹介します。overrides下記は各ポイントを意訳したものです。※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。Containers)。これらの定義はアイテムがGridアイテムになると、古いブラウザのために使用したビヘイビアが上書きされることを意味します。コードをフォークして、2つのバージョンを作成する必要はありません。Queries内に記述できます。Grid対応ブラウザのみに適用させることができます。Gridで、floatやflexbox、vertical-alignやinline-blockなど他のレイアウト手法をどのように上書きするかシンプルなデモと一緒に確認しておきましょう。Grid非対応ブラウザでアイテムをfloatさせた場合、そのアイテムがGridアイテムになると、floatは何の効果もなくなります。そのアイテムに適用されたclearプロパティも無効になります。floatとclearは、Gridアイテムに影響しません。inline-block;」に関連するプロパティは、アイテムがGridアイテムになったら無効になります。インラインブロックに設定されたアイテムは、Gridアイテムになります。table-cell;」を使用すると、匿名ボックスが生成されます。これらのボックスは欠けたテーブル要素になります。アイテムがGridアイテムになると、このボックスの生成は行われないため、匿名ボックスは生成されません。table-cell;」を使ったアイテムは、「vertical-align」プロパティを使用して整列させることができます。Alignmentプロパティを使用します。「vertical-align」は、Gridアイテムに影響を与えません。Gridで合理的なフォールバックは、多くのブラウザにサポートされているMulti-columnレイアウトを使用することです。コンテナがMulti-columnレイアウトのプロパティを使用し、Gridレイアウトになると、それらはレイアウトに適用されなくなります。Multi-columnレイアウトモジュールの「column-*」プロパティはGridコンテナに影響を与えません。Gridよりも優れたブラウザサポートを備えているため、フォールバックレイアウトに効果的に使用できます。Alignmentプロパティに対応しています。flexboxでソリッドなレイアウトを作成し、小さなグリッドを適用して大きな変更を加えることなく、うまく処理できます。従来のレガシーなレイアウトでは通常、アイテムに幅を指定する必要がありました。flexboxで実装したグリッドも、個々のアイテムに幅を指定する必要があります。Gridはグリッドを定義することでレイアウトを構築し、アイテムの幅を明示的に指定するのは望ましくないことがよくあります。幅は通常、@supportsブロック内で上書きする必要があります。幅をautoに指定すると、そのトリックが実行されます。幅を%で指定されたアイテムは、Gridコンテナではなくトラックの幅からパーセントが算出されます。フォールバックレイアウトに適用される幅に意図しない結果が生じることがあります。