Entrar Agora 网格系统之所以在今天的设计讨论里反复出现，并不是因为它有多新奇，而是它实实在在地解决了两件事：一是让页面元素之间建立起稳定的视觉关系，二是让设计能够比较从容地应对从桌面到手机等各种屏幕尺寸。换句话说，它既是一种建立层次和逻辑的方法，也是一套让设计看起来协调、不散架的约束。在响应式几乎成为标配的当下，理解网格，其实就是在理解内容怎么在不同宽度下重新安顿自己。
下面我们不打算把所有的布局形式都罗列一遍，而是从最常用的两种入手，看看它们在具体项目里是怎么工作的，往移动端延伸时，各自又会表现出怎样的行为。
单栏布局，有时候也叫全屏布局，结构简单到几乎不用解释——整个页面基本上就一列内容从上往下铺开。但恰恰是这种简单，让它拥有了很强的表现力。当不需要侧边栏、不需要太复杂的信息分区时，画面就可以被推到最前面，用大幅照片、插画或者一段极具氛围感的视觉内容来建立第一印象。所以你在主页、产品介绍页、品牌故事页或者新功能引导页里，经常能看到这种处理方式。
拿 WeWork 的官网主页来说，如果给它覆盖一层 12 列网格，能很清楚地看到：整页内容被组织在一个个上下堆叠的模块里，每个模块内部自己对齐，模块之间的间距始终保持一致。这种一致不是死板的均匀，而是一种情境式的节奏——大模块和小模块穿插，制造出阅读的停顿和呼吸感，但底层仍然被网格牢牢收束着，不会让人觉得散。
单栏布局在移动端的适配成本低得令人愉快。因为每个模块本身就是独立的块，在小屏幕上只需要把它们纵向排列，按照原来的次序往下走，几乎不需要重新考虑元素之间的位置关系。原本在桌面端占据一整屏的大图，到手机上依然可以撑满宽度，视觉冲击力并不会打折扣。对于追求快速上线、又希望跨端体验一致的项目来说，这是一种非常安全且高效的选择。当然，单栏并不等于单调，很多设计会在单栏内部通过色彩分区、视差滚动或者不同饱和度的背景来打破直线条的沉闷感，让页面在保持简洁结构的同时，依然有丰富的层次。
双栏布局则更偏向于处理信息量。如果说单栏擅长制造氛围，那双栏就更适合承载大量内容。它最常见的结构是：左侧或右侧留出一块较窄的侧栏，另一侧作为主内容区。这种做法有两个直接的好处，一是把正文的阅读宽度控制在 6 到 8 列（以 12 列网格为基准）的范围内，避免一行文字太长导致阅读疲劳；二是把导航、目录、广告或者相关链接这些辅助信息收拢到侧栏里，用户可以在不离开当前页面的情况下快速切换或获取补充信息。
在 12 列网格中，一个典型的分配方式是主内容区占 8 列，侧栏占 4 列，左右都是偶数，后续做响应式变化时也比较容易重新分配。Mango Learning 的课程页面就是个很好的例子，左侧栏固定为章节导航，点击不同章节，右侧主区域刷新内容，但整体布局关系不变，用户始终知道自己处在哪个位置，也能随时跳到其他章节。Discord 的帮助中心用了类似的思路，左侧是常见问题列表，当前问题高亮显示，右侧展示详细解答。像这种结构，对大量文档类页面尤其友好。
有意思的是，双栏布局到了移动端，行为并不像单栏那么自动。屏幕宽度缩窄到一定程度时，侧栏不可能再和主内容区并肩站立，通常会被推到主内容区上方或下方，或者收进一个汉堡菜单里。这时候就需要设计师提前想清楚：侧栏里的信息在移动端以什么优先级出现？是直接折叠成可展开的模块，还是挂在页面顶部成为一个快捷跳转的横条？这些决定会直接影响小屏上的使用效率。如果侧栏里装的是导航，那它在移动端的露出方式就变得特别关键，设计得不好，用户很可能找不到路；设计得好，它甚至能成为移动端流畅操作的一个支点。
除了上面这些例子，双栏布局在内容型网站、电商详情页、博客甚至一些食品品牌的产品展示页里也都很常见。比如有些美食网站会用左图右文的方式，把食物图片固定在左侧，右侧滚动描述配方或者故事，既保持了视觉吸引力，又让文字段落的宽度始终处于舒适的可读区间。这种处理本质上还是利用网格来约束信息密度，让“看”和“读”各得其所。
回过头来看，单栏和双栏并没有绝对的好坏之分，它们服务于不同的设计目标。如果你希望用户一进来就被某个核心画面或主张抓住，并且整个页面的信息流是线性的，不需要频繁跳转，那单栏布局往往更对路。如果你的页面需要承载大量文本，或者需要用户在多个并列板块之间来回切换，那双栏结构能帮你把层级理得更清楚，同时保持阅读的舒适感。
另外，网格系统在实际使用中远比这些基础分类要灵活。12 列框架下，你可以把 8+4 的组合变成 6+6，或者在大模块内部再嵌套更细的网格。关键在于，无论怎么变，那些看似隐形的辅助线始终在起作用——它们让元素之间的对齐有了依据，让比例关系不是凭感觉随意拉扯，而是可以解释、可以复用的。这种理性，在跨屏幕适配时尤其珍贵，因为它让设计决策从“这里看起来差不多”变成了“这里按规则应该这样落位”。
所以，下次再面对一个页面布局时，不妨先别急着往画布里扔元素，而是试着问自己：这里的内容天生的叙事结构是什么？是线性推进的，还是并联索引的？理解了这一点，再配上合适的网格，出来的结果往往不会太差。
