VOCABULARY / 词条
模块化网格
Modular Grid
用横向的行与纵向的列同时切分页面，行列交叠处形成统一尺寸的模块；内容按可预期的数量跨越若干模块放置，而不是只靠列宽变化的单向网格。IxDF 指出模块化网格由上到下的横向分割与由左到右的纵向分割共同构成，Müller-Brockmann 等瑞士平面设计师在此基础上确立了这套系统；Smashing Magazine 的网格方法文章说明网格单元需保持统一尺寸,短内容对齐到网格边界，长内容则跨越多个单元或收缩到标准单元内。
识别特征
- 页面同时存在纵向列线与横向行线，交叠处形成一致尺寸的模块
- 不同内容块按整数个模块的宽度与高度对齐，如 2x1、1x2、2x2
- 模块与模块间的间距在全页保持一致，跨模块的区块边缘仍落在网格线上
概念边界
模块化网格要求行列都参与切分，得到可两维度计数的模块；只按列宽分栏、行高随内容自由伸缩的网格不算模块化网格。Bento 是建立在模块化网格之上的一种具体构图风格，用不同大小的块面主动制造视觉层级；模块化网格本身不预设哪个模块更重要，只提供统一的坐标系。卡片网格是模块化网格的一种同构、重复的特例：每张卡片占据相同的模块数、结构一致；模块化网格允许不同区块跨越不同数量的模块，不要求彼此同构。三者需要分开讨论。
什么时候考虑它
- 页面需要容纳尺寸不一的内容块（标题、图片、摘要、引述），但仍要求它们互相对齐、可比较
- 编辑类或作品集页面需要在统一坐标系里安排跨栏、跨行的区块，而不是逐个自由定位
- 内容会随版本增删，需要一套可重复套用的比例关系来保持版式一致
什么时候慎用
- 所有内容天然等宽等高、只需重复排列时，同构的卡片网格更直接，不必额外维护行网格
- 只需要按阅读顺序分栏、不需要块面跨行时，普通的列网格已经足够，模块化网格会增加不必要的约束
- 内容长度和主题高度不确定、勉强切成整数模块会打断内容自身的呼吸节奏时，不应强行套用模块尺寸
取舍
统一的行列坐标系让不同尺寸的内容块仍可对齐、比较，跨模块的区块观感克制而有节奏；但需要预先规划模块与间距尺寸，内容长度必须适配模块的整数倍，编辑或增删内容时改动模块比例的成本高于自由布局。
条件规则 · 编辑建议
相关词条
Bento 是叠加在模块化网格之上的一种具体构图风格，主动用块面大小制造主次；模块化网格本身只提供统一坐标系，不预设哪块更重要。
卡片网格是模块化网格的同构特例：每张卡片跨越相同数量的模块、结构一致；模块化网格允许不同区块跨越不同数量的模块。
瑞士风格常以模块化网格作为版式的骨架，在其上安排字体、留白与对齐，两者常一起出现但概念层级不同。
单列布局刻意放弃横向切分，只保留一条顺序内容流；模块化网格用行列坐标系换取跨模块对齐与比较的能力。
来源与支持范围
把模块化网格定义为由上到下的横向分割与由左到右的纵向分割共同构成，行列交叠处产生的模块用于控制图文的放置与裁切；并指出 Müller-Brockmann 等瑞士平面设计师确立了这套模块化网格方法。
检索日期：2026-09-15 · 存档于 2026-09-18说明网格的基本单位需保持统一尺寸，设计时应让短内容对齐到网格边界、长内容跨越多个网格单元或收缩以适配标准单元，从而在版本变化中保持版式的一致与可预期。
检索日期：2026-09-15 · 存档于 2026-09-16说明网格放置只能用于视觉重排，不能改变文档的逻辑顺序：非视觉媒介（如朗读）与顺序导航（如 Tab 遍历）都遵循 DOM 顺序而非视觉排列。
检索日期：2026-09-15定义参考以上来源；数字界面示例、选择建议、条件关系及配方由本样例编辑，尚未经用户研究验证。
类型扩展与实现说明
尚无可操作的样本；插图为编辑示意。落地到产品时仍须验证：模块与间距尺寸是否在响应式断点下保持一致的比例关系、跨模块区块在窄屏折叠为单列后的阅读顺序是否仍与 DOM 顺序一致、以及内容长度变化时是否会破坏模块对齐。
{
"states": [
"multi-column-multi-row",
"collapsed-single-column"
],
"a11y": [
"网格放置只做视觉重排，DOM 顺序与朗读、Tab 遍历顺序保持一致",
"跨模块区块仍有清晰的标题或起始信号，帮助非视觉方式理解其边界"
],
"motion": "无"
}打开本词条的 Agent JSON 文件这个文件原样收录本词条的全部字段，并附上来源、存档与编辑声明。