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

Post on:2017年3月29日

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とdisplay: inline-block;
CSS Gridとdisplay: tableプロパティ
CSS Gridとvertical-alignプロパティ
CSS Gridとcolumnプロパティ
CSS Gridとflexbox
CSS Gridとアイテムの幅指定
その他の参考リソース

CSS Gridとfloat

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

<div class="grid">
  <div>One</div>
  <div>Two</div>
  <div>Three</div>
</div>

<div>Three</div>

</div>

.grid > div {
  float: left;
}

.grid {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: repeat(3, auto);
  width: 500px;
}

.grid > div {

float: left;

}

.grid {

display: grid;

grid-gap: 10px;

grid-template-columns: repeat(3, auto);

width: 500px;

}

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

CSS Gridとdisplay: inline-block;

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

<div class="grid">
  <div>One</div>
  <div>Two</div>
  <div>Three</div>
</div>

<div>Three</div>

</div>

.grid > div {
  display: inline-block;
}

.grid {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: repeat(3, auto);
  width: 500px;
}

.grid > div {

display: inline-block;

}

.grid {

display: grid;

grid-gap: 10px;

grid-template-columns: repeat(3, auto);

width: 500px;

}

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;」にセットされたアイテムは、匿名ボックスを生成しません

<div class="grid">
  <div>One</div>
  <div>Two</div>
  <div>Three
  <br>Has
  <br>extra
  <br>content</div>
</div>

<div>Three

<br>Has

<br>extra

<br>content</div>

</div>

.grid > div {
  display: table-cell;
  vertical-align: top;
}

.grid {
  border-spacing: 10px;
}

.grid {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: repeat(3, auto);
  width: 500px;
}

.grid > div {

display: table-cell;

vertical-align: top;

}

.grid {

border-spacing: 10px;

}

.grid {

display: grid;

grid-gap: 10px;

grid-template-columns: repeat(3, auto);

width: 500px;

}

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アイテムに影響を与えません。

<div class="grid">
  <div>One</div>
  <div>Two</div>
  <div>Three
  <br>Has
  <br>extra
  <br>content</div>
</div>

<div>Three

<br>Has

<br>extra

<br>content</div>

</div>

.grid > div {
  display: inline-block;
  vertical-align: top;
}

.grid {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: repeat(3, auto);
  width: 500px;
}

.grid > div {

display: inline-block;

vertical-align: top;

}

.grid {

display: grid;

grid-gap: 10px;

grid-template-columns: repeat(3, auto);

width: 500px;

}

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

CSS Gridとcolumnプロパティ

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

<div class="grid">
  <div>One</div>
  <div>Two</div>
  <div>Three</div>
</div>

<div>Three</div>

</div>

.grid {
  column-count: 3;
  width: 500px;
}


.grid {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: repeat(3, auto);
}

.grid {

column-count: 3;

width: 500px;

}

.grid {

display: grid;

grid-gap: 10px;

grid-template-columns: repeat(3, auto);

}

See the Pen Grid Overrides: multiple-column layout by rachelandrew (@rachelandrew) on CodePen.

CSS Gridとflexbox

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

<div class="grid">
  <div>One</div>
  <div>Two</div>
  <div>Three</div>
</div>

<div>Three</div>

</div>

.grid {
  display: flex;
  align-items: center;
  width: 500px;
  height: 200px;
  border: 1px dotted #694486;
}

.grid > div {
  flex: 1;
}

.grid {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: repeat(3, auto);
}

.grid {

display: flex;

align-items: center;

width: 500px;

height: 200px;

border: 1px dotted #694486;

}

.grid > div {

flex: 1;

}

.grid {

display: grid;

grid-gap: 10px;

grid-template-columns: repeat(3, auto);

}

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

CSS Gridとアイテムの幅指定

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

<div class="grid">
  <div>One</div>
  <div>Two</div>
  <div>Three</div>
</div>

<div>Three</div>

</div>

* { box-sizing: border-box; }

.grid > div {
  float: left;
  width: 33.333%;
}

@supports (display: grid) {
  .grid > div {
    width: auto;
  }
}

.grid {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: repeat(3, 1fr);
  width: 500px;
}