CSS Grid Layoutのカラムの幅が拡張される問題を解決する方法

公開日

Web制作を長くやっている人なら、IE6の「要素拡張問題 (Expanding Box Problem)」を知っているのではないでしょうか？

この「要素拡張問題」は、要素に指定した横幅を無視して、要素の内容が要素の幅を押し広げてしまうというものです。

CSS Grid Layoutのカラム (列) でも、同様の問題が起こったため、その解決方法をご紹介します。

カラムの幅が拡張される問題が起こるケース

次のようなコードで問題は発生します。

…
<style>
._grid {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: auto 50%;
  grid-template-columns: auto 50%;
  -ms-grid-rows: auto;
  grid-template-rows: auto;
}
._cell-1 {
  -ms-grid-column: 1;
  -ms-grid-column-span: 1;
  grid-column: 1 / 2;
  -ms-grid-row: 1;
  -ms-grid-row-span: 1;
  grid-row: 1 / 2;
}
._cell-2 {
  -ms-grid-column: 2;
  -ms-grid-column-span: 1;
  grid-column: 2 / 3;
  -ms-grid-row: 1;
  -ms-grid-row-span: 1;
  grid-row: 1 / 2;
}
</style>
…
<div class="_grid">
  <div class="_cell-1">
    <table>
      …
    </table>
  </div>
  <div class="_cell-2">
    …
  </div>
</div>
…

grid-template-columnsプロパティ (IEは-ms-grid-columnsプロパティ) で「auto」や「1fr」になっているカラムに、table要素などの一定の幅を持つ子孫要素を含む場合、カラムの幅が、その子孫要素の幅以下にならず、グリッド全体を押し広げてしまいます。

レスポンシブなレイアウトを作る場合「auto」や「fr」を使いたいケースは多々あると思うのですが、これは結構イタイ仕様 (バグ？) ですね。

カラムの幅が拡張される問題が起こらないケース

grid-template-columnsプロパティで「auto」や「1fr」を指定していた部分を、minmax関数値で「カラム幅は0から余った幅 (1fr) の間」と設定することで、カラムの幅が拡張される問題は発生しなくなりました。

._grid {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: minmax( 0, 1fr ) 50%;
  grid-template-columns: minmax( 0, 1fr ) 50%;
  -ms-grid-rows: auto;
  grid-template-rows: auto;
}

含まれる子孫要素自体は、はみ出てしまうので、overflow: auto; や max-width: 100%; などで、個別に対処する必要はあります。

「CodePen」による実際の表示

See the Pen CSS Grid Layout Expanding Column Problem by nov (@numerofive) on CodePen.

〆

CSS Grid Layoutは、プレフィックスを付ければIE11にも対応できるので、今後、使用する機会も多くなりそうですが、今回の問題のような特有のクセをきちんと理解して、上手に活用したいものです。

関連記事