要約

  • 2011年4月のW3C初公開Grid Layout草案は、表、JavaScript、寸法を測ったフロートを使うレイアウトが、画面の広さの変化に弱いことを挙げた。
  • 2017年12月のCSS Grid Level 1候補勧告は、グリッド容器、トラック、線、領域、柔軟な幅と自動配置を記述した。文書の内容構造はHTMLに置かれる。

食卓は疲れていた。データを行と列に並べる仕事なら得意だが、いつの間にかページの見出し、サイドバー、本文、広告、フッターまで支える建築家にされていた。フロートが柱を足し、スクリプトがメジャーを持って走る。画面が少し狭くなると、その家は脚の長さが違う棚のように揺れた。

2011年4月7日のW3C初公開Grid Layout作業草案は、まさにその現場から始まる。ウェブアプリの画面を作るため、作者は表、JavaScript、入念に測ったフロートを組み合わせていた。使える幅が変わると壊れやすい。固定幅にして逃げれば、大きな画面では余白が余り、小さな画面では内容が窮屈になる。

草案の答えは、利用できる空間を行と列に分け、線やセルを手がかりに部分を配置することだった。表との違いは文書の意味にある。データ表の行とセルは内容の関係を表す。配置用のグリッドは見た目の場所を決める。記事とサイドバーを隣に置くために、記事をデータ表の一マスへ押し込む必要はない。

初期の図面は、まだ語彙も固まっていなかった。2011年の例にはgrid-columnsやgrid-rowsが登場する。後年のCSSで使う書き方と同じではない。古い見本をそのまま現代の施工手順にするのは危うい。版をまたいで残ったのは、トラック、境界線、位置、伸縮する寸法を作者が示し、ブラウザーが実際の幅に合わせて解くという考え方だ。

2017年12月14日のW3C候補勧告では、グリッド容器とその子要素の扱いが詳しく書かれた。行列のトラックを作り、線や領域に名前を付け、大事な部分を明示的に置ける。残る要素は自動配置に任せられる。固定幅と柔軟な幅を組み合わせ、frで空いた空間を分ける。設計士は一つの画面幅だけに通用する座標を釘打ちしなくてよい。

自動配置は、増えるカードに効く。新しいカードが入るたび、編集者が「何行何列」を紙に書く必要はない。ブラウザーは指定された流れに沿って空きを探し、必要なら暗黙のトラックを増やす。作者は席の決め方を渡し、受付は来客を座らせる。十三枚目が来ても建て直しにはならない。

Gridは縦横を一緒に考える。見出しを複数列に渡し、ナビゲーションを一列に置き、下のパネルを揃えられる。他の流れに向くレイアウト道具もあるが、この話の主役はページの部屋割りだ。食卓はようやく台所へ帰れる。

見た目の部屋を動かすとき、文書の読む順番は置き去りにできない。CSSである部分を右上へ移しても、HTMLの並びは別の読み方や操作に残る。2017年の文書もこの区別を扱う。結論を画面の上へ運んだからといって、文章の因果が先に説明されたことにはならない。家具を動かす自由と、本を読む道筋は別に考える。

W3CのCSS Grid Layout Level 1公開履歴には、2011年の草案から2016年、2017年の候補勧告段階までが記録される。日付は規格文書の節目だ。即席の支柱に頼った画面が、容器、トラック、配置、柔軟な寸法を持つ設計へ進む様子が見える。

読者は設計図の型番を尋ねない。スマホでサイドバーが本文を押しつぶせば気付くし、カードが重なれば読む気を失う。Gridは作者に部屋の意図を示させ、ブラウザーに現場の幅で計算させた。食卓はコーヒーを載せれば十分だ。それは以前から上手だった。