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

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

1. 从列开始搭建页面

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

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

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

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

2. 列网格的秩序感

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

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

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

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

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