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

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

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

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

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

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

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

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

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