CSSグリッドレイアウトの基本 Vol.4 CSSグリッドレイアウトの登場

CSS グリッドの仕様は、フレックスボックスの仕様と同じメンバー構成（Tab Atkins、Elika J.Etemad、Microsoft から一人）でまとめられ、フレックスボックスから４年遅れで登場します。

CSS グリッドは、縦横に区切られたグリッドを使って要素の配置を決めていくレイアウトシステムです。要素ごとの設定や相互関係を気にせずにレイアウトを制御できる、フローレイアウトとは根本的に異なるものとなっています。

フローレイアウトからは独立した形で制御を行うことから、CSS グリッドは多機能で、さまざまな使い方が可能です。そのため、複雑に見えてしまいますが、機能のもとになっている概念（アイデアや理論的な考え方）を知るとわかりやすくなります。そこで、どのような概念が取り入れられることになったのかを、仕様が策定された過程を追いながら確認していきます。

CSSグリッドの仕様化のきっかけ

CSSグリッドが仕様化されるきっかけとなったのは、2011年にMicrosoftが提出した草案です。自社製品のアプリ開発において、UIチームが「より良いレイアウトツール」を必要とした結果でした。ここでも、「フローレイアウトにしばられないレイアウトシステム」が求められていたというわけです。

要するに、WebがWindowsにおけるネイティブアプリの開発オプションとなるために、MicrosoftはWeb用の堅牢で柔軟なレイアウトツールを必要としていたのです。

The Story of CSS Grid, from Its Creators
https://alistapart.com/article/the-story-of-css-grid-from-its-creators/

Grid Layout （2011 – 草案）
https://www.w3.org/TR/2011/WD-css3-grid-layout-20110407/

CSSグリッドに取り入れられた概念

Microsoftが提案したCSSグリッドはトラック（グリッドを構成する行列）を中心としたもので、「レイアウトシステムとしては完璧ではない」と評されました。しかし、翌年にはInternet Explorer 10（IE10）に搭載され、リリースされます。実際に動作するものが登場した影響は大きく、多方面からの検証が始まりました。

その結果、CSSグリッドにはトラックをベースとしたものに加えて、グラフィックデザインの世界で培われてきた伝統的なグリッドシステムが持つ「グリッドライン」の概念と、CSS1の登場時からBert Bosが提案し続けてきた「テンプレート」の概念が取り入れられます。テンプレートもグリッドをベースとしたものだったためです。

モダンな「グリッドレイアウト」の概念は産業革命以来存在していますが、グリッドは何世紀にもわたってデザインツールでありました。そのため、CSS が誕生したときからの目標が「グリッドベースのレイアウト」とされてきたことは驚くべきことではありません。
…
CSS ワーキンググループはMicrosoft の提案を微調整し、これらのアイデアを取り入れました。最終的に、トラック、ライン、テンプレート、またはこれらすべての観点から捉えることのできるグリッドシステムとなります。

モダンな「グリッドレイアウト」の概念は産業革命以来存在していますが、グリッドは何世紀にもわたってデザインツールでありました。そのため、CSS が誕生したときからの目標が「グリッドベースのレイアウト」とされてきたことは驚くべきことではありません。
…
CSS ワーキンググループはMicrosoft の提案を微調整し、これらのアイデアを取り入れました。最終的に、トラック、ライン、テンプレート、またはこれらすべての観点から捉えることのできるグリッドシステムとなります。

The Story of CSS Grid, from Its Creators
https://alistapart.com/article/the-story-of-css-grid-from-its-creators/

これらはそれぞれ異なる側面を持つ概念でしたが、GoogleのTab Atkinsらによってすべてが取り入れられ、一貫性のある１つのレイアウトシステムとしてまとめ上げられます。このとき、次の３つの目標を考慮して編集と修正が行われました。

１）パワフルであること
CSSグリッドを使用することで、デザイナーの思い通りの表現を可能にする。

２）堅牢であること
レイアウトが崩れる、スクロールが制限される、またはコンテンツが意図せずに消えるようなことがないようにする。

３）パフォーマンスが良いこと：
アルゴリズムがリアルワールドの状況（ブラウザのリサイズイベントや動的なコンテンツの読み込みなど）をエレガントに処理する速さを確保し、エンドユーザーにとってストレスにならないようにする。

The Story of CSS Grid, from Its Creators
https://alistapart.com/article/the-story-of-css-grid-from-its-creators/

こうして、「CSSグリッド」というレイアウトシステムが完成し、フレックスボックスから４年遅れの2016年に勧告候補がリリースされました。CSSグリッドの各概念や特徴については次のセクションで詳しく見ていきます。

CSS Grid Layout Module Level 1（2016 – 勧告候補）
https://www.w3.org/TR/2016/CR-css-grid-1-20160929/

CSSグリッドのブラウザへの実装を後押ししたもの

CSSグリッドは多機能ですが、その分だけブラウザの実装コストは高くなります。仕様がまとまっても、ブラウザに実装されなければ意味がありません。
さらに、仕様が勧告へと進んでいく過程でも、「最低２つのブラウザに実装されること（P.76）」が求められます。IEはMicrosoftが最初に提案した初期草案の形で実装したままで、勧告候補となった仕様の実装には及び腰でした。CSSグリッドはこの段階で頓挫しそうになります。
そこに手を差し伸べたのは、メディア企業のBloombergでした。Bloombergからのスポンサードにより、主要ブラウザのレンダリングエンジンであるBlinkとWebKitへの実装が進みます。

興味深い展開として、メディア企業のBloombergは、オープンソースのコンサルティング会社であるIgaliaにCSSグリッドをBlinkとWebKitの両方に実装するよう依頼しました。

The Story of CSS Grid, from Its Creators
https://alistapart.com/article/the-story-of-css-grid-from-its-creators/

Bloombergには、私たちのBlinkとWebKit上でのCSSグリッドレイアウトの取り組みや、V8とSpiderMonkey JavaScriptエンジンにおけるECMAScript 6（ES6）機能の実装を支援していただいたことに感謝いたします。

Welcome CSS Grid Layout
https://blogs.igalia.com/mrego/2014/03/13/welcome-css-grid-layout/

さらに、GoogleのテクニカルライターであるRachel Andrewや、P.56のIntrinsic Web Design（イントリンシックWebデザイン）を提唱したJen Simmonsにより、CSSグリッドを使った多彩なデモが作成されます。これにより、WebデザインコミュニティにもCSSグリッドを切望する熱意が広がり、ブラウザベンダーを動かします。

最終的に、勧告候補がリリースされた翌年の2017年には、IE以外の、Edgeを含む主要ブラウザがCSSグリッドに対応しました。
そのあとは、残念なことに初期草案で実装されたままだったIEの存在が足をひっぱり、Webでの利用はフレックスボックスに遅れを取ることになります。しかし、2022年にIEのサポートが終了したことで、じわじわと利用が広まってきています。

仕様の策定過程で求められる実装と相互運用性について

HTML の仕様はWHATWG でLiving Standard として策定されるようになりましたが、CSSの仕様は現在でもW3C で策定されています。W3C では仕様が草案から勧告へと進んでいく過程の中で、実装が求められます。
W3C のProcess Document（プロセス文書）によると、2005 年版と2014 年版以降とで表現が変わっていますが、いずれの場合も複数の実装が求められています。

2005年版

相互運用可能な2 つの実装を実証できることが望ましい

World Wide Web Consortium Process Document
https://www.w3.org/2005/10/Process-20051014/

2014年版

独立して相互運用可能な実装が存在するか

World Wide Web Consortium Process Document
https://www.w3.org/2014/Process-20140801/

現在はIE のサポートも終了し、Chrome とEdge が同じレンダリングエンジンのBlink を使用
するようになっています。

さらに、2020 年代に入ってからは、ブラウザベンダー各社や、コンサルティング会社のIgaliaなどが協力し、ブラウザ間の差異をなくす（相互運用性＝ Interoperability を高める）取り組みをしています。その結果、実装の差や、大きな表示の違いが生じることは少なくなっています。
ただし、なくなったわけではありません。
取り組みの一環であるInterop 2023 では、重点分野としてフレックスボックスとCSS グリッドが取り上げられています。本書執筆時点での相互運用性は、フレックスボックスが93.2%、CSS グリッドが83.4%となっています。また、下記サイトでは相互運用性を評価するためのテストや実装状況も確認できます。

著者プロフィール

本連載は、『作って学ぶ　HTML+CSSグリッドレイアウト』（2024年2月、マイナビ出版）の一部を抜粋、再編集したものです。

作って学ぶ　HTML+CSSグリッドレイアウト

「難しい」と敬遠していたCSSグリッドがきちんと身につく。

CSSグリッドを用いてWebサイトをデザインするための実践的な知識をまとめました。より深く理解し身に着けるために、HTML & CSSの歴史から振り返り、CSSグリッドの立ち位置や基本を見直した上で、実践的なパーツやUIを構築し、力がつく一冊になっています。「CSSグリッドってなんだか難しい」と距離を置いていた方も、きっと使える知識が身につきます。

Chapter 1　Web標準のレイアウトシステム
―Web が誕生したときから使われてきた、標準のレイアウトシステムである「フローレイアウト」。
　その生い立ちからなぜ「フローレイアウト」ではレイアウトを制御するのが難しいのか、紐解いていきます。

Chapter 2　CSSグリッドの誕生とその特徴
ー「CSS グリッド」が登場した背景を追います。

Chapter 3　基本のグリッド
ー3 タイプのグリッド「トラック」「ライン」「テンプレート」の構築をサンプルを用いて学びます。

Chapter 4　CSSグリッドのロジック