一、先看一个你每天都打开的页面
打开 B 站首页，随便截一张图。把正文区等分成 12 份，沿着分割线往下画竖线，再回头看页面：搜索框的左边界、第一排推荐卡片的右边界、卡片之间的缝、右侧按钮的边，大多落在这 12 份的边界上。严格说，12 栏之间是 11 条栏间线，加上两端各一条，一共 13 条；但设计圈习惯管这套规矩叫“12 条线”。
这些线不会画在页面上，只存在于排版规则里，平时完全看不见。可一旦标题、图标、按钮、封面都对齐到它们，原本各说各话的元素会像被同一只手摆过：间距一致，重心稳定，眼睛从一个区块走到下一个区块，不用重新找路。
栅格化设计解决的就是这件事：对齐。
二、为什么偏偏是 12
如果只能挑一个数给网页做栅格，12 很难被击败。
12 = 2 × 2 × 3，能同时被 2、3、4、6 整除。一条 12 栏的轴，可以在 6 栏处对半分，在 4 栏处三等分，在 3 栏处四等分，在 2 栏处六等分；1、5、7、8 栏这类奇数组合也都站得住。1/2、1/3、1/4、1/6、2/3、3/4 这些最常见的比例，12 全都接得住。
10 栏对半可以，五等分可以，做三栏就除不尽。16 栏对半、四等分、八等分都很顺，三等分同样留下小数点。12 是同时满足“二等分、三等分、四等分、六等分”的最小整数。这是它被 Web 时代大规模采用的算术原因。
12 真正值钱的地方是协作。
一个页面上，有人做六栏宽的列表，有人做四栏宽的卡片，有人做三栏宽的侧栏，有人做两栏宽的按钮组。只要大家都认这 12 栏，拼在一起时不用开会、不用量像素，边线自然对上。改版时也一样：先改栏的定义，各块的宽度跟着走，不用一页一页搬。
对读的人，栅格做的是另一件事：让信息有固定的位置。标题总在标题该在的地方，按钮总在按钮该在的地方，扫读的时候，眼睛不用每次重新熟悉这个页面。省下来的注意力，就是秩序感。
三、印刷时代的美感计算器
在屏幕出现之前，这套“用数字管版面”的习惯已经在纸上磨了几百年。
设计师们很喜欢斐波那契数列 1、1、2、3、5、8、13、21……相邻两数的比值会越来越接近黄金比 1:1.618，而黄金比被当作最舒服的比例之一。于是这个数列成了老派设计师的“美感计算器”：版心多宽、留白多少，拿它算一算，大差不差。
古腾堡在十五世纪中叶排《四十二行圣经》。后来的人拿尺子去量他的书页，发现版心与页面的比例相当接近黄金比。他究竟是算出来的还是凭手感调出来的，已经说不清，但那套比例确实经得起量。
把这件事从手感变成方法的，是 1946 年的荷兰设计师范德格拉夫（Jan van de Graaf）。中世纪的抄书人有一套代代相传的版面切分经验，却没人把它写成规则。范德格拉夫把这些经验整理成一套几何作图法：先定页面的对角线，再做几等分，一步步画下来，版心自然落在该落的位置。从那以后，“看着舒服”可以被复制、被传授、被检验了。
一年后，阿根廷排版师罗萨里沃（Raúl Rosarivo）做了另一件事：他真的去量了古腾堡的《圣经》。他的结论是，版心占页面的 6/9，四边留白按 1:1:2:2 分配：内边距 1、天头 1、外边距 2、地脚 2。这个比例后来被美因茨的古腾堡博物馆接受，成了经典版式的“黄金法则”之一。
有意思的是，东西方在留白上刚好反过来。西式版面把更大的空间留给地脚，让页面重心略微上移，看起来更稳；中式古籍则把天头留大，因为那是给批注、给眉批、给读书人写字的地方。同样是 2:1 的分配，一边让给手感，一边让给笔。
四、1962 年，栏变成了单位
到了现代主义时期，栅格从页面的比例变成了版面的系统。
1962 年，巴塞尔设计师卡尔·格斯特纳（Karl Gerstner）给《Capital》杂志做版式。一个版面要同时兼容 1 到 6 栏，按固定栏宽去切，总会有些组合落在半格上：想用 5 栏，就多出半条；想用 3 栏，又对不齐。这种“差一点点”的尴尬，靠调像素是调不完的。
格斯特纳的解法是把页面切成 58 个基本单位。栏宽不再是一个固定值，而是若干个单位的整数倍；栏间距也按单位算。这样一来，1 到 6 栏都能落在整数单位上，不再出现半格。栏宽从“切出来的”变成了“数出来的”。
栅格由此变成了一套可编程的度量系统。今天我们在 CSS 里写 repeat(12, minmax(0, 1fr))、用 fr 分配空间，是同一个思路：先定单位，再让内容按单位组合。
五、两千年前的朱丝栏
这套思路在中国出现得更早。
两千多年前的西汉，马王堆帛书上已经有“朱丝栏”：用朱砂在帛上画出竖线，字一行一行写在栏里，行距齐整，篇章不乱。那大概是最早的“基线栅格”。
到了宋代，雕版印刷成熟，版式规则被彻底制度化。宋版书常见的规格是“半叶十行，行十八字”：一页对折，半页十行，每行十八个字。版框、界行、版心、鱼尾，各有各的位置和尺寸。留白遵循“天二地一”，天头是地脚的两倍。遇到注文，就用“大字单行、小字双行”：正文一行大字，注释拆成两行小字排在下面。整套规则下来，一本书从第一页到最后一页，节奏是统一的。
这套成熟的版式秩序，比古腾堡的活字《圣经》早了三四百年。它跟今天的栅格做的是同一件事：用一套固定的规则，让不同的内容看起来像出自同一个体系。换一本书、换一个刻工，只要照规则来，出来的书还是“同一本书的样子”。
六、我们自己的 12 列
说回屏幕。最近我们网站的正文区，也把这件事做了一遍。
正文栏满宽 1160px，栏间距 20px。算下来，单栏约 78.3px：4 栏是 373px，3 栏是 275px。这两个宽度正好对应最常出现的结构块。
页面按 12 栏分：用户中心是左侧 8 栏内容、右侧 4 栏；兽聚详情是正文 8 栏、右栏 4 栏；词条页和词条编辑是正文 9 栏、右侧 3 栏。首页动态、首页热门地区、地区页热门这几块用 2 到 6 列的自适应网格：列宽下限 150px，满宽时正好 6 列，窗口变窄就一列一列地减少，手机上固定 2 列。
断点只有两档。1024px 以下，多栏结构收成一列，导航挪到底部；767px 以下切成手机密度，页边、卡片和栏间距一起收到 10px。导航侧栏、顶栏、底栏不参与这 12 栏，栅格约束的是正文区。
有些东西也不往 12 栏上套。兽聚卡片、搜索结果、好友列表、百科目录这些“流”，按各自的最小宽度自动填列。因为 12 栏管的是结构块的宽度：正文、侧栏、列表区。卡片内部还有它自己的最小宽度和内容密度，硬套进 12 栏，窄屏上只会剩一条缝。
用了这套规则之后，最明显的收益跟好看关系不大：新页面不用重新发明布局。拿到一个需求，先问它占几栏，再谈里面放什么；改版时也只动栏的定义，页面跟着走。
七、复杂与简约之间
人类文明好像一直在复杂和简约之间来回摆：信息越来越多，规则就得越来越简单；规则简单了，又能装下更多信息。栅格就属于后者。
B 站首页的封面、标题、内容都不一样，但 12 条线把它们收在同一个骨架里。宋版书的正文、注文、版心、鱼尾各司其职，也被一套规则收在同一页里。工具从刀笔变成活字，从活字变成像素，问题一直没变：怎么让很多不一样的东西，看起来像是一起被认真摆过的。
下次打开一个网站，可以试着找找那些看不见的线。卡片为什么停在那里，侧栏为什么是那个宽度，标题为什么不多不少。找到之后你可能会发现，秩序并没有抹掉个性，它只是把个性放在了该在的位置上。
