2018.02.25 [日] CSS Grid Layoutの時代がやってくる。[その1]
まだまだ寒い日が続きますが、もう暦の上では春ですね。
講師のカワグチです。暖かくなってくると花粉が心配ですが、それでも春は待ち遠しいですね。
2年前の年末に「そろそろFlexboxを勉強し始めてもいいんじゃないだろうか」という記事を書いて、WebサイトのレイアウトにCSS Flexboxの考え方をまとめました。

最近では、学校の授業でも、CSSでのレイアウトは、floatを使うよりもFlexboxを利用することを推奨しています。ところが、そんな話もつかの間、そろそろGrid Layoutが使えると言うことで、調べてみました。

参照:Can I use... Support tables for HTML5, CSS3, etc
Internet Explorer11のみベンダープレフィックス-ms-
が必要で、他のモダンブラウザ(Chrome, Firefox, Safari, Edge)の最新版では対応済みです。
StatCounter Global Stats調べでは、日本でのInternet Explorer11のシェアは、iPhoneのSafariに次いでの15.61%(2018年2月現在)です。

スマートフォンやモダンブラウザを対象とするのであれば、Grid Layoutを検討しても良いわけです。
CSS Grid Layoutとは
現在、W3Cでは勧告候補となっています。
Abstract
This CSS module defines a two-dimensional grid-based layout system, optimized for user interface design. In the grid layout model, the children of a grid container can be positioned into arbitrary slots in a predefined flexible or fixed-size layout grid.このCSSモジュールは、ユーザーインターフェイスの設計に最適化された2次元グリッドベースのレイアウトシステムを定義します。グリッドレイアウトモデルでは、グリッドコンテナの子を、あらかじめ定義されたフレキシブルまたは固定サイズのレイアウトグリッド内の任意のスロットに配置できます。
いつもの通り、W3Cの仕様書を調べてみました。