网格系统:设计师指南

网格系统是设计中干活最多、却最没功劳的部分。你敬佩的每个产品都有一套网格,你随手划过的每个产品都没有。网格不是装饰。它是一份契约,把字体排印、层级和节奏拴在一起,让用户一眼就能读懂页面,而不是费劲去解码。

瑞士学派六十年前就在印刷领域证明了这一点。Müller-Brockmann、Hofmann、Ruder,整整一代设计师把网格当作思考工具,而不是排版捷径。这堂课比几乎所有其他设计理论都经得起时间考验。从 Linear 到 Stripe 再到纽约时报,每一个现代产品网格都源自同一个理念。这是 2026 年网格的实战参考手册。

Müller-Brockmann 赋予现代网格语法

Josef Müller-Brockmann 1981 年的著作《Grid Systems in Graphic Design》至今仍是这门学科的脊梁。 在那本书之前,网格已经存在,但词汇还没有。在那之后,设计师有了一套共同语言,谈论栏、间距、页边距和模块,跨越工作室、学校与年代。

瑞士学派把网格当作约束引擎。选定一个系统,守住它,让变化来自内容,而不是即兴发挥。Müller-Brockmann 为苏黎世音乐厅(Tonhalle)设计的海报,放在 2026 年看就像产品 UI 截图,因为它们运行的是同一套逻辑。

固定网格上的强力字体。留白是结构元素,而不是剩下的空地。同样的逻辑今天仍在出现,比如 为什么 2026 年所有 SaaS 长得都一样 这样的文章,那种同质化就是网格赢了,然后又失去了锋芒。

网络缓慢地继承了这套语法。CSS 先给了我们 float,然后是 Flexbox,最后终于有了 CSS Grid。每一步都在缩小 1961 年印刷设计师能做到的和前端设计师在浏览器里能做到的之间的差距。

词汇没有变。栏还是栏。只是工具追上来了。

网格为什么有效,一段话讲清

网格有效,是因为它替设计师去掉了上千个小决定,并以可预测性的形式还给用户。眼睛在进入页面的第一秒就学会了节奏,并用这个节奏去浏览之后的一切。

没有网格,每个布局决定都是全新的。标题放哪,图片到哪停,正文多宽,侧边栏和主栏是什么关系。有了网格,这些答案都是预先定好的。

设计师把注意力花在层级和内容上,而不是重新测量每个区块。用户把注意力花在信息上,而不是解码结构。交易就这么简单。

五种网格类型,一次看全

大多数团队把“网格”当成一个决定。其实是五个。每一种解决不同的布局问题,也因不同的原因失败。选错了,页面会永远和你对着干。

这张表值得收藏。大多数关于布局的争论,在团队就这五种里用哪一种达成一致的那一刻就结束了。

栏式网格是主力

栏式网格是你在网络上交付的几乎所有东西的默认选择。 垂直的栏,固定的间距,可选的页边距。内容流入栏中,布局区块跨越一栏或多栏,节奏由画布被分成多少栏来决定。

Stripe 在整个营销界面上运行 12 栏网格。Linear 的应用外壳建立在栏式网格上,在移动端收为单一导轨,在桌面端展开为侧边栏加主栏。Vercel 的营销页面使用 12 栏网格,配合刻意的留白,眯起眼看仪表盘的定价矩阵或部署日志布局,就能看出那些栏。1961 年用在海报上的同一套网格,2026 年用在营销网站上,只是底下多了媒体查询。

只有当布局从根本上不是矩形时才跳过栏式网格,而在网络上这几乎从不发生。2026 营销网站技术栈 一文讲了架在这套网格之上的框架选择。

模块网格服务于编辑类密度

模块网格把画布在两个方向上都切成单元格,既有栏也有行。 它看起来像一张方格纸,行为也像方格纸。布局区块贴合单元格边界,密度从意外变成了设计杠杆。

纽约时报首页是网络上最经典的模块网格。标题、照片、摘要和广告都放在宽高一致的单元格里,即使视觉构图看起来千变万化。Bloomberg Terminal 把模块网格推向极致,信息密度之高,没有严格的单元格纪律就会崩塌。Notion 的画廊视图提供了更柔和的模块网格,卡片贴合固定的单元格宽度,内容在里面自适应。

当页面有许多小而可比较、需要作为一个系统来阅读的单元时,就用模块网格。当内容只是一两个大块时就别用,栏式网格用更少的仪式感就能干同样的活。只放两张卡片的模块网格,就是穿着戏服的栏式网格。

基线网格是节奏引擎

基线网格是控制垂直节奏的水平网格。 每一行文字都落在基线上,每个标题都落在这条基线的倍数上,页面读起来带着一种安静的音乐节拍,用户能感觉到却叫不出名字。

Apple 的营销页面运行严格的基线网格。随便打开一个产品页,看看标题、副标题、图片和正文如何共享同一套垂直节奏。Medium 在其长文模板上采用基线对齐,所以即使是 4000 字的文章读起来也毫不费力。出版部门 Stripe Press 在印刷的每一页和发布到网络的每一页上都运行基线节奏。

网页上的数学很简单。选一个基础单位,通常是 8 像素。把正文行高设成它的倍数,通常是 24 像素,即 16 像素正文字号的 1.5 倍。

标题也落在倍数上,所以 48 像素的 H1 配 56 像素的行高,依然贴合同一节奏。整个页面在同一个节拍上嗡嗡作响。

层级网格服务于阅读顺序

层级网格是围绕内容内在优先级定制的网格。 你不是从栏和行开始,而是从什么该第一个读、第二个读、第三个读开始。布局贴合的是这些决定,而不是通用模板。

Apple 的产品发布页就是现实中的层级网格。主视觉元素获得不成比例的空间,次要内容紧凑成簇,第三级内容放在靠近末尾的更窄栏里。纽约时报的大型专题,那些长滚动的多媒体作品,是逐场景设计的层级网格。Anthropic 的首页运行层级网格,一句话占据主导,其他一切都为支撑它而调整大小。

层级网格是最需要编辑判断力的网格类型。当设计师拿它当借口,逃避栏式或模块网格的纪律时,它就失败了。层级网格不是“没有网格”。它是由优先级决定几何形状的网格。

如果你的层级错了,网格就错了。优先级背后更深的逻辑见 视觉层级设计。

手稿网格服务于长文

手稿网格就是一栏。 这就是全部网格。一整块文字顺着页面往下走,有考究的页边距、刻意的行宽,没有任何其他东西和眼睛争夺注意力。

Stripe Press 的书是纸上的手稿网格。Notion 的文档页是浏览器里的手稿网格。Substack 的阅读视图、Apple Newsroom 的长文、纽约时报 Magazine 的单栏模式,全都运行同一套网格。书本五个世纪以来一直知道如何交付长文阅读。网络是在我们不再试图把侧边栏塞到 4000 字文章旁边的那一刻才追上来的。

约束在于行宽,也就是行长。目标是每行 65 到 75 个字符。更宽,眼睛换行时会丢行。更窄,节奏就支离破碎。

另一个约束是页边距。慷慨的侧边距不是浪费空间,而是让读者眼睛放松的画框。留白词条解释了为什么这些边距真的在干活。

12 栏系统驱动现代网络

12 栏网格是默认选择,因为 12 是最易整除的小数字。 它能干净地分成 1、2、3、4、6 和 12。这涵盖了营销网站或产品 UI 需要的几乎所有布局模式,无需借助分数。

Bootstrap 在 2011 年为网络规范了 12 栏网格,从未需要为这个选择道歉。Tailwind 的网格工具默认提供 12 栏。Material Design 的响应式网格、Carbon Design 的网格、Shopify 的 Polaris,全是 12 栏。这个选择不是巧合,而是数学。

以下是大多数团队要么在用、要么糟糕地重新发明的 12 栏速查表:

• 12 全宽主视觉、横幅、页脚、通栏内容
• 8 + 4 主内容加侧边栏,经典的产品应用外壳
• 6 + 6 双列内容块、营销功能行、对比板块
• 4 + 4 + 4 三列卡片、定价档位、三栏功能网格
• 3 + 3 + 3 + 3 四列标志墙、团队网格、图片画廊
• 9 + 3 内容加窄元信息栏,常见于编辑类布局
• 2 + 8 + 2 居中内容并留出呼吸空间,用于营销详情页

尽早锁定这些模式,团队就不会再在设计评审里争论布局。模式决定跨度,跨度决定数学,数学交付页面。你不需要设计系统 中接下来的论点,部分就在于一套紧凑的网格就完成了设计系统声称要做的大部分事情。

屏幕上的基线节奏,不只是纸上的

基线对齐是大多数团队在网页上跳过的网格理论部分,因为浏览器不会强制执行。跳过它,页面会因为用户说不出的原因显得抖动。守住它,页面就像一件成品。

诀窍是用垂直单位思考,而不是像素。选 8 像素为基础。所有内边距、外边距、行高和组件高度都变成 8 的倍数。

16 像素正文配 24 像素行高,贴合节奏。48 像素 H1 配 56 像素行高,贴合。24 像素的卡片内边距,贴合。96 像素的板块间距,贴合。整个页面变成一件只调到一个音的乐器,眼睛可以毫无卡顿地穿行其中。

Linear 在 issue 列表里实现了基线节奏。Notion 在文档阅读器里实现了。Figma 的 Slides 产品在幻灯片缩略图和编辑器画布上都保持了节奏。守住节奏的团队,往往就是把字体排印当作系统、而不是样式表覆盖的团队。

不慌不忙的响应式网格

响应式网格就是同一套网格在不同宽度下运行。 它不是每个断点一个不同的设计,而是同一个构图在视口缩小时聪明地收拢。

标准做法是桌面端 12 栏,平板 8 栏,手机 4 栏。桌面端的 4 + 8 布局在平板上变成 4 + 4,在手机上变成单栏。3 + 3 + 3 + 3 的四列布局在平板上变成 4 + 4(两行,每行两个),在手机上变成 4 + 4 + 4 + 4(四个堆叠)。数学是一致的,因为栏数是按整齐的分数递减的。

Stripe 的网站是生产环境中教科书级的响应式网格。Linear 的营销页面在三个断点间重排,没有一个布局让人觉得被挤压。Vercel 的定价矩阵通过把并排对比折叠成堆叠的手风琴来重排,这是大多数团队永远想不通的响应式技巧:“响应式”有时意味着“改组件,而不是改栏”。定价页问题 详细讲了这个决定。

错误在于把移动端和桌面端设计成两个互不相关的布局。构图出现分歧,品牌在手机和笔记本上读起来不一样,团队最后要维护两个产品。先设计网格,再把断点设计成这套网格的收拢。首屏区词条讲了用户在每个断点下最先看到的那部分网格。

CSS Grid 时代:印刷级工具终于到了

CSS Grid 是浏览器第一次拥有与 1961 年印刷设计师能力相当的布局原语。 在 CSS Grid 之前,网页设计师只有 float、Flexbox 和大量的耐心。现在我们有了真正的网格线、命名区域、间距控制,以及像 Müller-Brockmann 排海报那样排页面的能力。

这个转变很重要,因为过去是构建时的决定(我用哪个框架的网格),现在是浏览器内置的布局原语。display: grid 加 grid-template-columns: repeat(12, 1fr) 再加 gap: 24px,就是一个 12 栏网格。不需要框架。不需要工具类。只是 CSS 在做十年前就该做的事。

Tailwind 的网格工具现在只是 CSS Grid 上的一层薄糖衣。Bootstrap 的网格基本上是为一个已不存在的问题准备的兼容垫片。从 CSS Grid 中获益最多的团队,把它当作设计工具,而不是 Flexbox 的备用方案。

Linear 的编辑器用 CSS Grid 做 issue 面板布局。Figma 的网页编辑器用它做画布外框。Vercel 在大部分营销网站上使用它。工具就在工具箱里,问题是设计系统是在用它,还是在 2026 年的基础设施上跑 2018 年的模式。

值得研究的真实产品网格

内化网格系统最快的方式,就是研究那些做得好的产品。五个值得细看。

Linear 在应用外壳里运行紧凑的栏式网格,在营销网站上运行 12 栏网格,两者之上都有基线节奏。issue 列表、项目视图、文档面板,全都贴合同一套垂直与水平网格。它是目前产品 UI 中最干净的栏式网格实现。

Vercel 运行带有刻意留白的 12 栏网格。营销页面会呼吸,仪表盘运行更密的模块网格,而部署视图(见 加载状态就是产品)运行层级网格,构建日志占主导,其他一切都给它让路。

Stripe 在营销界面上是经典的 12 栏网格,在仪表盘中是模块网格。仪表盘卡片贴合一致的宽度,指标块共享高度,整个产品在三十多个屏幕上读起来像一个构图。反仪表盘 一文讲了这套网格所实现的理念。

Apple 在产品页上用层级网格,处处都有基线节奏,在 App Store 和 Newsroom 里用模块网格。Apple 的网格纪律是网络上最接近瑞士学派印刷品的东西,而大多数产品团队低估了品牌印象有多少仅来自网格本身。

编辑类网格:NYT、Figma 和 Anthropic

纽约时报 在首页运行模块网格,在大型专题运行层级网格,在长文上运行手稿网格。同一家出版物刻意使用三种网格,根据编辑任务在它们之间切换。这就是那堂课:网格类型是每个界面的设计决定,而不是全局设置。

Figma 在文件浏览器里运行栏式网格,在团队库里运行模块网格,在画布内部运行定制网格。Notion 为文档提供手稿网格,为数据库提供模块网格。较新的产品 Loops 和 Resend,营销页采用干净的 12 栏网格,应用内则是更紧凑的栏式网格。Anthropic 的网站运行层级网格,每个板块由一句话主导,更多借鉴了编辑类布局而不是产品 UI。没有引导的引导 一文展示了网格纪律如何延续到常被当作一次性布局的首次使用流程中。

何时(故意)打破网格

只有当网格足够可见,让打破读起来像一个刻意的选择时,打破网格才有效。 如果打破的背后没有网格,被打破的元素只是页面上一个没对齐的东西。

Apple 产品页让主视觉图延伸出页边距,打破的是一套在其他地方都收得很紧的网格。NYT 专题中一张照片在文章中途炸开成满版出血,打破的是一套上下都运行着严谨模块的网格。Anthropic 的首页偶尔会让一句引语偏离轴线,以预期两倍的大小摆放,这招之所以有效,是因为周围的一切都扣得严严实实。

规则是每个界面一次打破。两次打破读起来就是没有网格。这次打破应该是页面上最令人难忘的时刻。如果你指不出这个元素在打破哪套网格,你不是在打破网格,你是在装饰一个没有结构的布局。线框图词条讲了早期阶段决定你要承诺哪套网格的问题。

设置页问题 中的设置面板纪律是相关的一课。设置页往往是网格纪律崩塌的地方,因为每个设置看起来都足够不同,似乎值得一个不同的布局。其实不值得。守住网格,让内容在里面变化。

网格就是品牌,即使没人指出来

如果你把本文提到的任何产品的颜色、字体和图像都剥掉,这些网格仍然可以辨认。Linear 的网格依然像 Linear。Stripe 的网格依然像 Stripe。网格是产品交付的最深层的品牌资产,因为它是用户在从未有意识地看到的情况下感受到的那一个。

选一种网格类型,选一个栏数,选一个基线单位。在每个界面上守住一年,品牌就会开始从结构中浮现,而不是从表面处理中。这就是瑞士学派教过、而大多数产品团队不断重新学习的全部秘密。网格干活。其余都是装饰,成败取决于网格是否在那里托住它。

FAQ

栏式网格和模块网格有什么区别?

栏式网格只把画布分成垂直的栏,所以布局区块跨越一栏或多栏,节奏是水平的。模块网格在两个方向上把画布分成单元格,既有栏也有行,所以区块贴合单元格,密度成为一种被设计的属性。栏式网格处理营销网站和大多数应用外壳。模块网格处理仪表盘、编辑类布局,以及任何需要让许多小而可比较的单元作为一个系统来阅读的 UI。

为什么 12 栏网格是标准?

12 是最易整除的小数字。它能干净地分成 1、2、3、4、6 和 12,涵盖了几乎所有布局模式(全宽、二分、三分、四分、六分),无需分数。Bootstrap 在 2011 年规范了它,Tailwind 把它作为默认值,此后每个主流设计系统都做了同样的选择,因为数学就是数学。

既然有了 CSS Grid,我还需要 CSS 框架吗?

就布局而言,不需要。display: grid 配 grid-template-columns: repeat(12, 1fr) 和 gap,三行 CSS 就是一个 12 栏网格。Bootstrap 和 Tailwind 这样的框架通过组件约定、工具类简写和团队一致性带来价值,但布局原语本身现在已是浏览器功能。如果框架能让你的团队更快,就用它。别因为觉得做网格非它不可才用。

FAQ:交付与打破网格

在真实产品中如何保持基线节奏?

选一个基础单位,通常是 8 像素。让每个内边距、外边距、行高和组件尺寸都是这个单位的倍数。16 像素的正文配 24 像素的行高。

标题用 32、40、48 或 56,行高用 40、48、56 或 64。板块间距用 96 或 128。这种纪律很无聊,结果却是一个读起来像成品而不是草稿的页面。

我什么时候该打破网格?

每个界面一次,并且是在网格足够可见、让打破读起来像刻意之举的时候。这次打破应该是页面上最令人难忘的时刻。如果你指不出这个元素在打破哪套网格,说明页面还没有网格,只有一个布局。先修好网格,再打破它。

CTA

如果你想要一个把网格系统当作产品脊梁、而不是上线前才想起来的补丁的团队,聘请 Brainy。我们交付的产品由网格干活,品牌一眼可读,节奏贯穿每个界面。Müller-Brockmann 会点头认可。你的用户也会,即使他们永远不知道自己看的是哪一种网格。