01｜2011 年 W3C 就把 Grid 挂上去了，可它并没有立刻改变 Web
如果你只看今天，会很容易误会 CSS Grid 是一种顺理成章的能力。
可时间线一点都不“顺理成章”。
W3C 在 2011-04-07 就发布了 CSS Grid Layout Module Level 1 的首份公开工作草案。
到 2016-09-29，它才第一次进入 Candidate Recommendation。
再到 2017 前后，Grid 才真正开始以“主流浏览器可依赖能力”的姿态进入前端日常。
也就是说，从第一份公开草案到进入 CR，Grid 光在规范层面就磨了 5 年半；从“正式摆上桌”到“像样可用”，又差不多拖了整整一代前端人的职业周期。
这才是 Grid 最值得写的地方。
因为它不是没人想到。
也不是没人承认它重要。
而是：
它早就被正式提出了，但 Web 还是花了很多年，才敢把这套二维布局系统真正交付给日常开发。
02｜更耐人寻味的是：它一开始就不是小修小补，而是冲着“应用布局”去的
2011 年那份首稿的摘要写得非常直白。
它说 Grid 是一套 “targeted at web application authors” 的能力，擅长处理 “major regions of an application”，也就是 Web 应用的大区块布局。
这很重要。
因为这说明 Grid 从第一天开始，就不是那种“先做个小功能试试看”的提案。
它的目标非常明确：
- 不只是把元素排整齐
- 不只是补一个视觉技巧
- 而是要正面处理 Web 应用里最核心、最长期、最折磨人的布局问题
这也解释了为什么它会慢。
因为这种东西一旦做出来，就不是给作者玩具箱里再塞一把新扳手。
它更像是在给平台补一整套长期欠账的基础设施。
而基础设施型能力，几乎从来都快不了。
03｜在 Grid 出现之前，Web 一直没有真正像样的布局系统
今天很多前端已经习惯把布局分成几类：
- 一维排布，用
Flexbox - 二维分区，用
Grid - 细节定位，再靠常规定位和流式布局补
但这张心智地图，是很后来的事。
在更长的一段时间里，Web 世界其实一直没有一个真正可靠、通用、声明式、面向页面结构的布局系统。
早年的开发者怎么活？
你大概都知道那些老招：
- 表格布局
floatclear- 绝对定位
- 一层层嵌套容器
- 各种“算宽度算到头皮发麻”的技巧
这些东西不是不能用。
它们的问题在于，它们都更像拿现成零件硬拼，而不是平台真的给了你一套“我知道你在做页面布局”的工具。
表格能做版面，但语义不对。
float 本来是拿来做文字环绕和图文混排的，却被逼着去承担整页布局的脏活。
绝对定位很直接，但一旦页面开始响应式、开始流动、开始适配多内容长度，就会越来越像一套脆弱机关。
你可以说 Web 一直能布局。
但在 Grid 出现之前，它很长时间都只是：
能凑合，不算像样。
这也是为什么后来很多人第一次真正理解 Grid 时，会有一种非常强烈的情绪：
原来浏览器终于承认，“页面布局”本身就是一个值得被认真设计的问题。
04｜那为什么浏览器不早点给？
因为“大家需要二维布局”和“浏览器可以轻松交付一个二维布局系统”，根本不是同一件事。
你如果把 Grid 理解成“多几个格子”，就会低估这件事有多重。
Grid 真正难的地方，在于它不是一个小补丁，而是一整套布局思路。
它要处理的，不只是“把元素排成表格状”。
它还要处理：
- 行和列同时存在时的尺寸计算
- 内容驱动尺寸和显式轨道尺寸之间的关系
- 自动放置（auto-placement）
- 区域命名与区域分配
- 对齐逻辑
- 与书写模式、响应式场景、已有布局模型的关系
这些问题单个看都不抽象。
可一旦它们要在浏览器引擎里一起落地，事情就开始变得很重。
标准这边要面对的是：
怎样设计一套既强大、又不至于失控、还能让作者学得会的模型？
实现这边要面对的是：
怎样在现有布局引擎里把这一整套账算清楚，而且别把性能和维护成本拖爆？
这就是 Grid 和很多“小而美”特性的根本差别。
它不是加一条语法糖。
它更像给平台补上一整套多年欠账的基础设施。
而基础设施型能力，通常都慢。
因为它一旦定错，就会连累很多年。
05｜Grid 的尴尬在于：它既不是小需求，也不是小工程
这件事很关键。
如果一个能力只是小需求，浏览器可以干脆不做。
如果一个能力只是小工程，浏览器可以早点试。
Grid 最折磨人的地方就在这里：
它明明是大需求，但偏偏也是大工程。
这意味着谁都很难轻率地说：
“我们先随便上一个版本吧，反正以后再改。”
CSS 世界不是没吃过这种亏。
前面第五篇写过，Flexbox 自己就留下过多代语法共存的残局。前缀时代更是把“先发再说”这套逻辑的后遗症展示得淋漓尽致。
所以到了 Grid 这种更底层、更系统的能力上，浏览器团队反而更容易变保守。
不是他们不懂需求。
而是他们很清楚：
一旦这套东西大规模进入生产世界，它就很难再像实验 API 一样轻松收回。
这也是为什么 Grid 的“慢”，和纯粹的官僚拖延不太一样。
它更像一种很典型的现代 CSS 式拖延：
- 需求是真的
- 行业也知道迟早得给
- 但谁都不想把一个半成品布局系统写进未来十年的互联网
06｜2011 年之后，Grid 开始像一件真的会发生的事
2011 年 4 月 7 日，CSS Grid Layout Module Level 1 的首份公开工作草案发布。
这件事的重要性，不在于“从这天起大家就能马上用了”。
而在于：
Web 终于把二维布局当成一个正式问题摆上桌了。
这背后的意义非常大。
因为一项能力只要还停留在“作者一直想要”“论坛一直在抱怨”的阶段，它就始终只是舆论压力。
只有当工作组开始给出真正的模型、草案、术语、边界和讨论对象时，它才从愿望变成工程议题。
而且这份首稿的编辑名单也很说明问题。
里面有 Microsoft 的编辑，也有 Daniel Glazman。
这说明 Grid 在一开始就不是一篇边角料提案，而是被认真放进标准流程里、按正式模块来推进的能力。
Grid 的草案出现，意味着整件事从“为什么还没有”进入了“到底该怎么做”。
这一步看似只是流程推进，实际上是命运分水岭。
因为很多 Web 能力最后死在，恰恰就是从愿望到模型的这一步。
Grid 至少跨过去了。
只是跨过去，不等于马上到终点。
后面的几年，它依然在反复打磨、反复调整、反复等待实现与规范彼此靠拢。
这段时间不够热闹，却非常典型地说明了：
真正重要的 CSS 能力，经常不是靠爆发式发布长出来的，而是靠漫长收敛长出来的。
07｜Grid 最终能熬出来，不只是因为它好，而是因为它太难绕开
为什么有些功能慢着慢着就没了？
因为行业虽然会抱怨，但还能绕过去。
为什么 Grid 慢着慢着却活下来了？
因为行业绕不过去。
你把那几年真实的前端布局场景想一想，就会明白。
大家不是在追求一项可有可无的新玩具。
大家是在拿这些年积攒下来的布局债催平台还钱。
float 不是长久之计。
绝对定位不是长久之计。
只靠一维心智的 Flexbox 也不是所有版面问题的终局。
Web 最终总得有一套更适合页面结构的二维布局能力。
也就是说，Grid 的成功，并不只是“这个方案设计得不错”。
它更大的底气是：
只要 Web 继续承载复杂界面，这个方向就迟早会重新被提起，而且会一轮比一轮更难压下去。
这类需求一旦形成，就很有生命力。
它不依赖单一厂商。
也不依赖一时风口。
它来自整个生态长期共同受苦。
而长期共同受苦，是标准化世界里最稳定的推进器之一。
08｜还有一个容易被低估的因素：Grid 不是只靠规范活下来的
Grid 这条线还有一点特别重要：
它不是只靠工作组文本慢慢推进。
它还靠一群人持续不断地把它讲给开发者听。
这件事里，Rachel Andrew 和 Jen Simmons 的角色特别关键。
原因不只是她们“推广了 Grid”。
而是她们帮 Grid 完成了一件非常难的事：
把一个复杂、正式、甚至有点吓人的布局系统，翻译成了开发者真正愿意学习、愿意尝试、愿意拿来解决问题的东西。
这是很多标准史写作里容易忽略的一环。
我们很容易把标准推进理解成：
- 工作组起草
- 浏览器实现
- 用户使用
可中间其实还隔着一层非常关键的传播转换。
没有这层，很多能力就算技术上已经“可用”，社会上也未必真正活起来。
Grid 的命好就命好在：
- 它解决的问题足够普遍
- 它的模型虽然复杂，但收益肉眼可见
- 它又恰好遇到了一批特别能讲、特别能做示范的人
这让它不是只在规范里成立。
它在开发者心智里也成立了。
而一项标准一旦同时在规范、实现、教育和实践里成立，生命力就会变得非常强。
09｜2016 到 2017 年，Grid 才终于从“长期议题”开始变成“现实工具”
W3C 的 publication history 很适合拿来提醒自己别把记忆写虚了。
Grid 不是在 2011 年一挂草案就立刻成熟的。
它中间经历了一连串工作草案，直到 2016-09-29 才第一次进入 Candidate Recommendation，之后又在 2017-02-09、2017-05-09、2017-12-14 连续出现 CR 快照。
这串时间线很重要，因为它说明：
Grid 真正被行业当成“快能放心用了”的东西，是 2016 到 2017 这一段，而不是更早。
等到 2017 年 前后主流浏览器陆续把现代 Grid 推上来，行业气氛一下就变了。
很多人第一次感觉：
网页布局终于有了点“现代工具”的样子。
这时候 Grid 反而会制造一种历史错觉。
因为它看起来太合理、太顺手、太像常识了，所以后来的读者很容易误以为：
既然这么合理，它一定是很自然长出来的。
不是。
它是被多年的痛点、规范打磨、实现收敛、以及传播教育一起熬出来的。
Grid 的“逆袭”并不在于它原本被所有人嫌弃，后来突然翻红。
它真正的逆袭，是：
一个多年未被认真满足的老痛点，终于逼着平台把欠账还到了足够像样的程度。
这比“某功能火了”要重要得多。
因为它说明，Web 平台有时候虽然慢，但并不是永远赖账。
只要问题足够大，足够普遍，足够绕不开，它就会在漫长讨价还价之后，慢慢被写进共识。
10｜所以，Grid 这条线最值得记住的，不是它强，而是它说明“平台会迟到，但未必永远不来”
Grid 的故事特别适合拿来反驳一种很轻浮的看法：
“浏览器就是不想给开发者能力。”
这话不能说全错。
但 Grid 恰好证明，事情没这么简单。
很多时候，浏览器不是不想给。
它是在面对一种很重的能力时，既怕给晚了挨骂，也怕给早了埋雷。
Grid 的命运说明：
如果一个 CSS 能力同时满足这几件事，它就很有可能最终活下来：
- 问题足够普遍
- 替代方案足够痛苦
- 平台方向并不排斥它
- 规范和实现虽然慢，但能逐步收敛
Grid 几乎条条命中。
所以它最后成功，不是偶然。
它只是花了 Web 一贯擅长的那种方式成功：
很慢，但很难再被绕过去。
如果你只记一句，那就记这句：
Grid 的逆袭，不是一个新功能突然翻红，而是 Web 终于承认：二维布局这笔欠账，拖得再久也得还。
编者注（事实核对）：CSS Grid Layout Module Level 1 的首份公开工作草案发布时间为 2011-04-07。根据 W3C publication history，Grid 在 2016-09-29 首次进入 Candidate Recommendation，并在 2017 年持续发布 CR 快照；这比“2011 就有草案”晚了整整五年多。首份 WD 的摘要明确写到 Grid 面向 web application authors，擅长处理 应用的大区块布局，并可与 media queries 结合以适应不同 form factors。文中关于 Grid “解决长期布局欠账”“属于基础设施型能力”“依赖传播与教育完成普及”等判断，属于基于公开史料与行业实践的写作性归纳，不是 W3C 官方表述。
关键人物速览
- Rachel Andrew：Grid 最重要的布道者之一。她的工作让很多开发者第一次真正把 Grid 当成可用的日常工具，而不是规范里的陌生新名词。
- Jen Simmons：推动 Grid 进入大众前端视野的关键人物之一。她擅长把复杂布局能力翻译成开发者能立刻理解的实际设计语言。
- Tab Atkins Jr.：现代 CSS 模块推进中的重要编辑人物，Grid 这条线后期绕不开他。
- Elika Etemad（fantasai）：长期参与现代 CSS 模块化推进的重要编辑，Grid 的成形也属于她参与整理、打磨的那类“慢收敛”成果。
参考与延伸阅读
CSS Grid Layout Module Level 1 publication history
https://www.w3.org/standards/history/css-grid-1Grid Layout（First Public Working Draft, 2011-04-07）
https://www.w3.org/TR/2011/WD-css3-grid-layout-20110407/CSS Grid Layout Module Level 1（Candidate Recommendation Snapshot, 2016-09-29）
https://www.w3.org/TR/2016/CR-css-grid-1-20160929/MDN：CSS grid layout
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_grid_layoutJen Simmons：Layout Land / CSS Grid 相关系列
https://www.youtube.com/layoutlandRachel Andrew：Grid by Example
https://gridbyexample.com/
下篇预告：为什么 :has() 这样一个大家喊了很多年的愿望，会在 CSS 世界里硬生生拖上二十年。