지금 로그인 设计师画界面时，常常会为一个细节反复纠结：这个模块间距用 20px 还是 24px？左侧栏要不要跟上面的卡片对齐？如果项目里没有一套底层规则，每次调整都像在做“像素级手工活”，页面越复杂，决策成本就越高。
网格系统就是为了解决这类问题而存在的。它把页面布局、尺寸、间距变成一套直观的参考系，让设计有规律可循，不用每次都用试错来对像素。更重要的是，不同页面、不同人输出的界面，能保持高度一致。提前在项目里定义好网格，相当于给整个团队配了一把共用的尺子，合作时很少再为“这里为什么是 24px”这种事扯皮。
网格系统，说白了就是由一系列最小单位构成的底层框架，这些最小单位叫作网格单位。在网页设计里，这个单位最常被定义为 8。为什么是 8？一来，偶数在等分和计算时天然占优，二倍、四倍都很顺手；二来，8 这个数值能很好地匹配主流屏幕的像素密度，不容易出现模糊或半像素对不齐的问题。现在很多前端开源组件库，比如 Ant Design，底层原子单位就是 8，这不是巧合，而是大量工程实践验证后的共识。
有了最小单元，还需要更大的组织方式。网格系统由“列”和“槽”交替分布形成。列是数量的单位，我们常说的 12 栅格、24 栅格，指的就是列的个数。槽则是列与列之间的间距，它决定了页面留白的多少。槽值越大，版面越疏松透气；槽值越小，内容就越紧凑。实际设计中，槽通常设为一个固定值，比如 16px 或 24px，这样整个系统的间距就有了统一的基准。
以一个内容区块为例，它通常会横跨几列，并把相邻的槽也包含进去，这个承载内容的区域可以理解为一个“盒子”或“区域”。它真正决定了模块在页面上的宽度，也让我们在调整布局时不必一个像素一个像素地抠，而是用“占几个格子”来思考。
要搭建一套好用的网格系统，第一步是确定网格区域的宽度。这个宽度取决于你怎么定义页面容器。如果页面是全屏宽度，那网格区域宽度就等于响应式内容区宽度减去左右页边距的两倍；如果内容区是垂直居中固定宽度的，那网格区域宽度就等于这个内容区本身的宽度。这一步做完，我们就有了一个明确的“画布”范围。
接下来要确定列数和槽宽。常见的列数有 12 和 24 两种。槽不能放任何内容，只负责留白，所以列宽和槽宽共同决定模块的最终尺寸。它们之间的关系可以用一个简单公式表示：网格区域宽度 = 列数 ×（列宽 + 槽宽） - 槽宽。举个例子，你有一个 1200px 宽的网格区域，采用 12 列，槽宽设为 20px，那么列宽就可以反推出来。实际计算时，推荐用 GridGuide 这类网格化工具来辅助，省去手动算的麻烦。
12 栅格和 24 栅格分别适合不同的场景。12 栅格在 Bootstrap、Foundation 这类前端框架里很常见，特别适合中后台页面中业务信息分组不多、单个卡片内容量较大的情况。它的等分方式直接，2、3、4、6 栏分割都很利落，视觉上整齐干净。24 栅格则更灵活，适合业务信息量大、分组多、单个区块信息少而杂的场景。相比 12 栅格，它能提供更多样的组合，比如 7-7-10 或者 5-5-5-9 这样的非等分搭配，在内容复杂时更容易做出细腻的层次。
网格系统最终要落到实际页面上，主要从横向和纵向两个维度来发挥作用。
横向划分，就是利用列的宽度来组织模块。以 12 栅格为例，一个页面很容易被拆成 2 等分、3 等分、4 等分、6 等分，甚至由这些等分组合出的各种不等分布局。比如一个典型的查询页面，顶部的筛选区域和统计数据可以按 3 等分来排布，下方的主数据列表则直接占满一整行。这样页面从上到下，所有模块的边界都严格对齐到网格线上，看起来规整又舒服。
纵向划分，则主要靠垂直间距来控制信息层级。以 8 这个原子单位为基础，通常会定义三档间距：小间距 8px，用来拉开同类元素内部细微的关系；中间距 16px，用于分隔同一组内不同的字段或操作；大间距 24px，用在板块与板块之间，形成清晰的区域划分。如果这三档还不够用，可以在 8 的基础上按倍数增减，比如 32px、40px，或者干脆加入分割线来强化层次。纵向间距的规律同样可以用一个公式表达：y = 8 + 8 × n，其中 n 取 0、1、2…，这样任何间距都能被 8 整除，确保整个页面在垂直方向上始终保持一致的节奏感。
一旦在项目中把网格系统固定下来，很多设计决策就变成了“按规则填空”，而不是“每次重新发明轮子”。模块的宽度、间距、留白都会自动对齐，不同页面之间也能共享同一套视觉语言。对于团队协作来说，这比任何口头约定都更可靠，也更省时。