IE11に対応させる場合はCSS Grid Layoutを利用しない方がいいかも

【2026年10月追記】Internet Explorer 11は2022年6月15日にサポートが終了しました。現在の主要ブラウザ（Chrome、Edge、Safari、Firefox）は、どれもCSS Grid Layoutに対応しています。IE11への対応が必要なければ、CSS Gridは安心して使えます。

2017年ごろからCSS Grid Layoutで作成されるサイトが少しずつ増えてきました。
Bootstrapを主に使用してきた人たちにも好評のようです。

管理人はJen Simmons氏のブログ（https://jensimmons.com/）でCSS Gridを知りましたが半信半疑でした。以前のGridを想像していたからです。
しかし、実際に記載してみるとHTMLとCSSが簡単に記載でき、いままでのレイアウトをより自由に構築できるのです。
横並びを簡単に配置できるflexboxよりCSS Gridが主流になるかもしれません。

CSS Grid LayoutのIE11対応の問題

CSS Grid Layoutは、縦横自由に配置できます。

シンプルな2カラムや3カラムのレイアウトなら、かなりシンプルなコードになります。複雑なレイアウトも短時間で可能になるかもしれません。
ただし、IE11に対応させる場合が問題です。

上記の例もIE11でみると1カラム表示となります。

これぐらいだったらベンダープレフィックスで対応可能ですが、凝ったレイアウトでは-ms-などベンダープレフィックスが効かないケースもあります。

複雑なレイアウトの場合はIEでもCSS Gridに対応できるJavaScriptなどが開発されるまではflexboxでページを作成した方がよいかもしれません。