在我们看一些产品页面设计时，会很快发现一个现象：有些页面明明内容差不多，但看上去就是更稳、更顺、更专业。很多新手会把原因归结到字体、颜色或者组件风格上，但如果你问一个成熟的设计师，他大概率会告诉你一句话：“先看结构是不是站住了。”而这个“让页面站住”的关键，就是网格系统。

整个网格系统有三种常用类型：列网格、模块网格和基线网格。在这个系列中，我们会把三者拆开来讲，循序渐进，让你真正理解网格为什么能让设计“变得专业”。而第一篇文章，就是关于最基础也最关键的那类网格：列网格（Column Grid）。

1. 从列开始搭建页面

还记得你第一次打开空白画布时的那种无从下手吗？一块大白板横在面前，想放标题没位置感，想放图片不知道宽度多少，看着各种网站和 App 的版面都清晰又规整，但自己却不知道如何让画面“稳住”。真正的原因，其实很简单：你还没有为画面确定一套横向结构。

无论是网页排版、App 首页，还是文章详情页，你第一件事其实不是选字体，也不是调颜色，而是要回答一个最基础的问题：内容在横向应该如何排列？这就是列网格的工作。

你可以把列网格想象成建筑的主梁。只有主梁的位置确定了，墙体、门窗、隔断这些部件才知道该怎么搭。

设计也是一样，只要列的位置定了，你所有的组件、文字、图片都会自然找到自己的位置。

2. 列网格的秩序感

列网格其实并不神秘，它就是一组从上到下贯穿整个画布的竖向分栏。这听起来简单，但作用却非常深。当你把页面切成几个固定的列之后，就像突然给信息装上了轨道：

• 标题可以靠着轨道左 aligned
• 正文可以控制在合理的行宽内
• 图片可以精确决定占几列
• 侧栏内容可以稳稳落在一侧
• 有些内容需要跨栏时，也能合规跨列

于是，画面一下子从“凭感觉摆放”，变成了“有秩序、有依据的布局”。用户也会在第一眼时感受到一种“专业、干净、稳定”的视觉体验。

在平板电脑上，当屏幕分辨率为 600 dp 时，Material将列网格设为 8 列

你可以理解为：列网格提供的是一种“横向的秩序感”，也是设计中最基础的秩序。 只要横向站住了，所有东西都能继续往下构建。

3. 为何列网格是内容源头

假设你今天要设计一个文章页面，如果你直接开始放标题和正文，很快就会发现这些问题：

• 标题到底应该多宽？
• 正文字体 16px 时，行宽多少最舒服？
• 侧栏有没有必要？
• 如果有，它的宽度是多少？
• 图片放在正文里会不会太宽或太窄？
• 文本区和插图区之间怎么保持一致性？

这些问题单看都很小，但加在一起，就会让新手在画布前陷入迷茫。而当你决定采用一套列网格，例如“12 列结构”时，这些问题都迎刃而解：

• 主内容区域可以占 8 列
• 侧栏占 3 列
• 中间留 1 列做视觉呼吸
• 行宽自然被控制在合理的范围内
• 所有图文都能找到自己的对齐点

于是你突然就体会到，原来设计不是靠“摆放感觉”，而是靠结构先把关系安排好。一旦关系确定，视觉才真正“站得住”。

4. 列网格如何提升阅读

我们再从读者的视角切入一次，当用户上下滚动一篇文章时，他并不会意识到“哦，这里用了 12 列网格”。但他会感觉到页面是稳定、舒服、有节奏的。

这种体验从哪里来？就是从列网格的“横向秩序”来。当你的列位置固定，正文、标题、图片都被收纳在一条条看不见的结构线里，阅读路径就会变得非常自然，眼睛不会被突然变宽或变窄的段落打断，相关信息会靠近排列，不同信息会通过占列比例形成视觉对比，文字与留白之间都有一定的呼吸感。你会发现，阅读体验的稳定，更多来自结构，而非视觉装饰。

5. 列网格三大典型应用场景

5.1 Web设计

在网页上，你永远不知道用户用的是什么屏幕，从 1440px 到 1920px 再到 2560px，都可能有人使用。

开发者和设计师早就发现：只有列网格能在不同宽度下保持“横向结构一致”。因此网页界最经典的设计模式，就是：

• 大屏用 12 列
• 中屏用 8 列
• 小屏（平板）用 6 列
• 移动端用 4 列

这就是响应式布局的核心逻辑。

5.2 App设计

App 屏幕更窄，但列网格同样重要，只是列数变少了：

• 4 列（最常见，控制内容稳重易读）
• 6 列（适合更复杂的首页或卡片网格）

列越多，界面越灵活；列越少，界面越稳定。

5.3 图文排版

图文场景里，一个关键原则是：行宽决定阅读效率。过宽会累，过窄会碎，而列网格会让你从一开始就把行宽控制在合理范围内。你甚至会发现：当你把正文锁在固定列宽里，整篇文章的“纸感”会立刻增强，读起来更稳、更舒服。

6. 在 Figma 中如何使用网格

如果你使用 Figma，你会发现 Frame 上有一个“Layout Grid”功能。大多数新手会直接用“Rows”或“Grid”，但其实真正最常用、也最应该先用的，是“Columns”。

在 Figma 里设置列网格只需要三步：

1. 选择你的 Frame（页面区域）
2. 打开 Layout Grid，选择 Columns
3. 输入列数、列间距和边距

但关键不是操作，而是认识到：所有内容都要贴着列走。比如：标题左侧贴着左列线，图片的右边贴着某一列的边，卡片区块占两列或三列宽，正文永远不要随意拉宽，应该占固定列宽。

当你持续坚持这种“贴列”的习惯后，你的页面会自然呈现出一种专业、一致、干净的视觉气质。

7. 小结

列网格不是一个技巧，而是一种“结构思维”，它让设计从“凭感觉”变成“有依据、有逻辑”，它决定了整个页面的骨架，它是所有复杂网格体系的起点，模块网格和基线网格都必须建立在它之上，如果把整个网格系统比喻成建筑结构，那么，列网格是梁柱，模块网格是墙体与房间的功能划分，基线网格是家具摆放的秩序感。

下一篇文章，我们就会正式进入第二个部分：模块网格（Modular Grid），它会告诉你如何让页面从“结构稳固”走向“灵活、富于变化的二维布局能力”。