摘要

  • W3C 2011 年 4 月首份 Grid Layout 公开草案直指当时的权宜之计：表格、JavaScript 和精心测量的浮动元素难以应对变化的页面空间。
  • 2017 年 12 月的 CSS Grid 一级候选推荐文本描述网格容器、轨道、线、区域、弹性尺寸和自动放置；内容结构留在 HTML，视觉位置由 CSS 安排。

饭桌看起来累坏了。原本负责一排排展示数据，后来有人把网页页眉、侧栏、正文、卡片、页脚都堆在它背上。浮动元素在旁边撑架子，JavaScript 拿着卷尺补缝。一旦屏幕变窄，整套房子像把柜子搭在长短不齐的椅腿上。

W3C 在 2011 年 4 月 7 日发布的首份 Grid Layout 公开工作草案正是从这种困境说起。网页越来越像应用，作者却常用表格、脚本或仔细计算的浮动元素安排大块区域。可用空间一变，布局便可能脆弱。有人索性固定宽度，在大屏留下空地，在小屏把读者挤到墙角。

草案建议把可用空间分成行和列，再用网格线或单元位置安排页面部分。它与数据表格的区别十分关键。表格的行列属于内容结构，告诉读者数据如何对应；布局网格属于呈现规则，决定侧栏和正文摆在哪里。网页可以换一种陈设，却不必把文章伪装成一格数据。

2011 年草案仍在摸索属性写法。示例里有 grid-columns、grid-rows，与后来定型的 CSS 属性不同。不能把最早的施工草图直接当作今日的规范。贯穿不同版本的，是作者想要表达轨道、界线、位置和弹性尺寸，由浏览器按现场空间计算结果。厨房在图纸上最初叫什么，远不如房子终于有图纸重要。

到2017 年 12 月 14 日的 W3C 候选推荐文本，CSS Grid 一级已经详细描述网格容器与项目。作者可以指定行列轨道、命名网格线或区域，亲自安排重要部分，也让其他项目自动入位。轨道可以固定，也可以伸缩；fr 单位用于分配可用的剩余空间。页面不再是一串只适合某个屏幕宽度的钉死坐标。

自动放置尤其适合不断增加的卡片。编辑新增一张卡片，不必每次手写它的行列地址；浏览器按照流向规则找位置，必要时添出隐式轨道。作者制定座位规则，浏览器负责把新客领到空位。第十三张卡片不会再成为夜间紧急维修单。

Grid 擅长同时考虑两个方向。页眉可以横跨数列，导航占一条轨道，内容面板在下方对齐。行和列一起工作，像一张真正的房屋平面图。其他布局工具有自己擅长的流向；这篇故事关心的是网页大块区域如何在二维空间里稳定安家。饭桌终于可以退回餐厅。

视觉移动还需要尊重文章顺序。CSS 可以把一个元素画到屏幕另一处，HTML 里的源顺序仍是许多阅读和导航方式会走的路。2017 年文本认真区分这种差别。把结论摆到右上角，不会自动让原文提前交代因果。家具可以挪，书页不能靠油漆重排。

W3C 的 CSS Grid Layout Level 1 发布历史从 2011 年 4 月草案起，记录 2016、2017 年的候选推荐阶段及后续修订。日期属于规范文本。它们展示的是一条清楚的变化：从表格和浮动拼凑，到容器、轨道、定位和弹性尺寸组成的完整布局机制。

读者很少询问一条侧栏如何站稳，却会马上发现它在手机上挡住正文，或者卡片互相撞成一团。Grid 让编辑交出设计意图，让浏览器针对眼前屏幕算出房间尺寸。饭桌现在只需托住咖啡。这份工作，它做得相当好。