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

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

1. 从列开始搭建页面

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

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

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

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

2. 列网格的秩序感

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

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

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

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

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

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

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

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

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

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

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

4. 列网格如何提升阅读

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

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