前面我们讲的列网格，解决的是"内容在横向上怎么排列"的问题。栏把页面在纵向上切成等宽的份，设计师决定每个元素占几栏，元素的横向位置和宽度就确定了。

但有些页面的内容不只需要横向排列，还需要在纵向上对齐成行。一个数据看板，十几个指标卡片排成三行四列，每行的高度需要一致，否则卡片会上下错落，看起来像是随意堆放的。

一个商品列表页，几十个商品卡片按网格排列，每个卡片的高度需要统一，否则瀑布流式的参差不齐会干扰扫视效率。一个图片墙，图片按行列展示，行与行之间的间距需要和列与列之间的间距保持一致，否则页面的节奏在两个方向上不统一。

列网格管不了这些纵向上的问题，因为列网格只定义了横向的栏，没有定义纵向的行。模块网格在列网格的基础上增加了行的划分，让页面在横向和纵向上都有结构可循。

一、模块网格和列网格的关系

模块网格不是一种和列网格平行的全新网格类型。它是在列网格的基础上，叠加了一层纵向的行划分。

列网格的栏决定了元素的横向位置和宽度。模块网格的行在这个基础上，又决定了元素的纵向位置和高度。栏和行交叉之后，页面被分成了一个个矩形区域，每个矩形就是一个"模块"。一个模块可以容纳一张卡片、一个数据指标、一张图片，或者任何一个独立的内容单元。

理解这个叠加关系很重要，因为它意味着模块网格的横向参数和列网格完全一致。栏数还是那个栏数，间距还是那个间距，边距还是那个边距。模块网格只是在列网格已有的横向结构上，增加了纵向的行高和行间距两个新参数。设计师不需要在使用模块网格时重新定义横向参数，只需要在列网格的基础上补充纵向的规则。

二、什么场景需要模块网格

不是所有页面都需要模块网格。大多数界面用列网格就足够了，因为大多数页面的内容在纵向上是自然流动的，一个区块结束了，下一个区块自然衔接上，不需要强制对齐到某一行的高度上。

模块网格发挥作用的场景，是页面上有大量同类型的内容，需要在横向和纵向上同时对齐的时候。

数据看板是模块网格最典型的应用场景。一个运营看板上可能有十几个指标卡片，每个卡片显示一个关键数据和一个趋势图。这些卡片需要排成整齐的行列，每行的高度一致，每列的宽度一致，这样运营人员在扫视时才能快速定位到自己关心的那个指标。如果卡片的高度参差不齐，视线在行与行之间跳转时就需要不断调整焦点位置，扫视效率会明显下降。

而且在数据看板中，卡片的大小往往不是完全统一的。核心指标的卡片可能占 2×2 个模块（两栏宽、两行高），次要指标的卡片占 1×1 个模块，趋势图占 2×1 个模块（两栏宽、一行高）。这些不同大小的卡片需要在同一套网格中对齐。如果没有模块网格的行列结构，设计师就需要逐个卡片手动调整位置，稍有变化就会导致对齐关系崩溃。有了模块网格，每个卡片占几个模块是明确的，位置和大小都从网格规则中推导出来，改动任何一个卡片都不会影响其他卡片的对齐关系。

商品列表和图片墙是另一类常见场景。电商平台的商品列表页，几十个商品卡片按网格排列，每个卡片包含商品图片、名称和价格。这些卡片在横向上已经靠列网格对齐了，但在纵向上，如果不做约束，不同卡片因为商品名称长度不同、图片比例不同，高度可能会不一致。模块网格的行高定义了每个卡片的最大高度，确保同一行的卡片底部对齐。

图片墙的情况类似。如果所有图片使用统一的宽高比（比如 1:1 或 4:3），模块网格可以让图片在行列两个方向上都严格对齐，页面呈现出整齐的网格节奏。如果图片的原始比例各不相同，设计师需要决定是裁剪图片以适应统一的模块尺寸，还是允许不等高排列（这时候就变成了瀑布流布局，后面会讲）。

判断一个页面需不需要模块网格，可以用一个简单的标准：如果页面上有三行以上需要在纵向上对齐的同类内容，模块网格就要考虑使用。如果只有一两行并排内容，列网格加上手动控制高度就够了，不需要引入模块网格，以增加复杂度。

三、模块的尺寸怎么定

模块有两个尺寸需要确定：宽度和高度。

模块的宽度不需要单独定义，因为它直接由列网格的栏数决定。一个模块可以占 1 栏、2 栏、3 栏，模块的宽度就是对应栏数的栏宽加上栏之间的间距。比如在一个 12 栏的网格中，一个占 3 栏的模块，宽度就是 3 个栏宽加 2 个间距。

模块的高度需要单独定义，这是模块网格相比列网格多出来的核心参数。定义行高有两种思路。

第一种思路是基于内容的最小高度。设计师先确定模块里要放的内容最少需要多高。比如一个数据指标卡片，包含指标名称（一行文字）、指标数值（一个大号数字）和一条迷你趋势线，加上上下内边距，总共需要大约 120px 的高度。

那么行高就设为 120px，每个模块高 120px。需要更大空间的卡片可以占 2 行，高度就是 120px × 2 加上行间距。

第二种思路是基于固定的宽高比。设计师让模块的高度和宽度保持一个固定的比例关系，比如 1:1（正方形模块）或 4:3。这种思路适合图片墙和视觉导向的页面，因为统一的宽高比能让页面呈现出整齐的视觉节奏。宽高比确定后，行高会随着栏宽的变化而变化。如果栏宽是 80px，模块宽高比是 1:1，一个占 2 栏的模块宽 168px（80×2 + 8px 间距），高也是 168px。