模块化网格

尚无可操作的样本；插图为编辑示意。落地到产品时仍须验证：模块与间距尺寸是否在响应式断点下保持一致的比例关系、跨模块区块在窄屏折叠为单列后的阅读顺序是否仍与 DOM 顺序一致、以及内容长度变化时是否会破坏模块对齐。

{
  "states": [
    "multi-column-multi-row",
    "collapsed-single-column"
  ],
  "a11y": [
    "网格放置只做视觉重排，DOM 顺序与朗读、Tab 遍历顺序保持一致",
    "跨模块区块仍有清晰的标题或起始信号，帮助非视觉方式理解其边界"
  ],
  "motion": "无"
}

{
  "id": "modular-grid",
  "type": "layout",
  "name": {
    "zh": "模块化网格",
    "en": "Modular Grid"
  },
  "aliases": [
    "模块网格",
    "Grid System",
    "Module Grid"
  ],
  "granularity": "page",
  "intents": [
    "overview",
    "organize-content"
  ],
  "tags": [
    "网格",
    "模块",
    "版式",
    "对齐",
    "布局"
  ],
  "definition": "用横向的行与纵向的列同时切分页面，行列交叠处形成统一尺寸的模块；内容按可预期的数量跨越若干模块放置，而不是只靠列宽变化的单向网格。IxDF 指出模块化网格由上到下的横向分割与由左到右的纵向分割共同构成，Müller-Brockmann 等瑞士平面设计师在此基础上确立了这套系统；Smashing Magazine 的网格方法文章说明网格单元需保持统一尺寸,短内容对齐到网格边界，长内容则跨越多个单元或收缩到标准单元内。",
  "boundary": "模块化网格要求行列都参与切分，得到可两维度计数的模块；只按列宽分栏、行高随内容自由伸缩的网格不算模块化网格。Bento 是建立在模块化网格之上的一种具体构图风格，用不同大小的块面主动制造视觉层级；模块化网格本身不预设哪个模块更重要，只提供统一的坐标系。卡片网格是模块化网格的一种同构、重复的特例：每张卡片占据相同的模块数、结构一致；模块化网格允许不同区块跨越不同数量的模块，不要求彼此同构。三者需要分开讨论。",
  "signature": [
    "页面同时存在纵向列线与横向行线，交叠处形成一致尺寸的模块",
    "不同内容块按整数个模块的宽度与高度对齐，如 2x1、1x2、2x2",
    "模块与模块间的间距在全页保持一致，跨模块的区块边缘仍落在网格线上"
  ],
  "when": [
    "页面需要容纳尺寸不一的内容块（标题、图片、摘要、引述），但仍要求它们互相对齐、可比较",
    "编辑类或作品集页面需要在统一坐标系里安排跨栏、跨行的区块，而不是逐个自由定位",
    "内容会随版本增删，需要一套可重复套用的比例关系来保持版式一致"
  ],
  "when_not": [
    "所有内容天然等宽等高、只需重复排列时，同构的卡片网格更直接，不必额外维护行网格",
    "只需要按阅读顺序分栏、不需要块面跨行时，普通的列网格已经足够，模块化网格会增加不必要的约束",
    "内容长度和主题高度不确定、勉强切成整数模块会打断内容自身的呼吸节奏时，不应强行套用模块尺寸"
  ],
  "tradeoff": "统一的行列坐标系让不同尺寸的内容块仍可对齐、比较，跨模块的区块观感克制而有节奏；但需要预先规划模块与间距尺寸，内容长度必须适配模块的整数倍，编辑或增删内容时改动模块比例的成本高于自由布局。",
  "comparison": {
    "focus": "在统一坐标系里安排尺寸不一但仍需对齐的内容块",
    "mechanism": "行与列同时切分出的等尺寸模块，内容跨若干模块放置",
    "cost": "需要预先定义模块与间距尺寸，内容长度要适配模块的整数倍"
  },
  "sources": [
    {
      "id": "modular-grid-ixdf",
      "title": "Interaction Design Foundation · What are Grid Systems?",
      "url": "https://ixdf.org/literature/topics/grid-systems",
      "claim": "把模块化网格定义为由上到下的横向分割与由左到右的纵向分割共同构成，行列交叠处产生的模块用于控制图文的放置与裁切；并指出 Müller-Brockmann 等瑞士平面设计师确立了这套模块化网格方法。",
      "checkedAt": "2026-09-15",
      "archive": {
        "lookupUrl": "https://web.archive.org/web/20260915*/https://ixdf.org/literature/topics/grid-systems",
        "status": "unconfirmed",
        "checkedAt": "2026-09-16T04:05:57.254Z",
        "error": "error:no-request",
        "jobId": "spn2-0cb950ff84cb17c5f74108fb6c1ea108475b4ea2"
      }
    },
    {
      "id": "modular-grid-smashing",
      "title": "Smashing Magazine · Designing With Grid-Based Approach",
      "url": "https://www.smashingmagazine.com/2007/04/designing-with-grid-based-approach/",
      "claim": "说明网格的基本单位需保持统一尺寸，设计时应让短内容对齐到网格边界、长内容跨越多个网格单元或收缩以适配标准单元，从而在版本变化中保持版式的一致与可预期。",
      "checkedAt": "2026-09-15",
      "archive": {
        "lookupUrl": "https://web.archive.org/web/20260915*/https://www.smashingmagazine.com/2007/04/designing-with-grid-based-approach/",
        "status": "available",
        "checkedAt": "2026-09-16T04:05:57.287Z",
        "jobId": "spn2-52ca147afab10746928190fbae563328a21b832a",
        "url": "https://web.archive.org/web/20260916040712/https://www.smashingmagazine.com/2007/04/designing-with-grid-based-approach/",
        "timestamp": "20260916040712"
      }
    },
    {
      "id": "modular-grid-mdn-a11y",
      "title": "MDN · Grid layout and accessibility",
      "url": "https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_grid_layout/Grid_layout_and_accessibility",
      "claim": "说明网格放置只能用于视觉重排，不能改变文档的逻辑顺序：非视觉媒介（如朗读）与顺序导航（如 Tab 遍历）都遵循 DOM 顺序而非视觉排列。",
      "checkedAt": "2026-09-15",
      "archive": {
        "lookupUrl": "https://web.archive.org/web/20260915*/https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_grid_layout/Grid_layout_and_accessibility",
        "status": "available",
        "checkedAt": "2026-09-15T18:29:58.748Z",
        "jobId": "spn2-bf1ca2741c8446f855c995e13f036afd2ef6e6ab",
        "url": "https://web.archive.org/web/20260915183028/https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Grid_layout/Accessibility",
        "timestamp": "20260915183028"
      }
    }
  ],
  "relations": [
    {
      "target": "bento",
      "kind": "related",
      "condition": "判断块面大小差异是否本身承担表达层级的作用",
      "reason": "Bento 是叠加在模块化网格之上的一种具体构图风格，主动用块面大小制造主次；模块化网格本身只提供统一坐标系，不预设哪块更重要。",
      "basis": "editorial"
    },
    {
      "target": "card-grid",
      "kind": "related",
      "condition": "判断区块是否同构、是否总是占据相同的模块数",
      "reason": "卡片网格是模块化网格的同构特例：每张卡片跨越相同数量的模块、结构一致；模块化网格允许不同区块跨越不同数量的模块。",
      "basis": "editorial"
    },
    {
      "target": "swiss",
      "kind": "composes_with",
      "condition": "页面采用瑞士风格的版式语言",
      "reason": "瑞士风格常以模块化网格作为版式的骨架，在其上安排字体、留白与对齐，两者常一起出现但概念层级不同。",
      "basis": "editorial"
    },
    {
      "target": "single-column",
      "kind": "alternative",
      "condition": "决定是否需要多方向对齐的坐标系，还是只需顺序阅读一条内容流",
      "reason": "单列布局刻意放弃横向切分，只保留一条顺序内容流；模块化网格用行列坐标系换取跨模块对齐与比较的能力。",
      "basis": "editorial"
    }
  ],
  "rules": [
    {
      "when": "页面使用模块化网格安排多个内容块",
      "instruction": "在全页保持模块尺寸与间距一致，让不同区块的跨模块宽高（如 2x1、1x2、2x2）之间仍可直接比较。",
      "strength": "recommend",
      "basis": "editorial"
    },
    {
      "when": "用网格放置让区块的视觉位置偏离其在源码中的顺序",
      "instruction": "只用网格做视觉排列，不要用视觉网格把内容重排到偏离逻辑顺序（DOM 顺序）的位置；朗读与顺序导航仍应遵循逻辑顺序。",
      "strength": "must",
      "basis": "editorial"
    },
    {
      "when": "内容长度或结构与模块尺寸不完全匹配",
      "instruction": "不要为了凑满整数模块而强行截断或拉伸内容，打断它本身的阅读节奏；必要时允许该区块的模块跨度作为例外。",
      "strength": "recommend",
      "basis": "editorial"
    }
  ],
  "behavior": {
    "states": [
      "multi-column-multi-row",
      "collapsed-single-column"
    ],
    "a11y": [
      "网格放置只做视觉重排，DOM 顺序与朗读、Tab 遍历顺序保持一致",
      "跨模块区块仍有清晰的标题或起始信号，帮助非视觉方式理解其边界"
    ],
    "motion": "无"
  },
  "demo": null,
  "version": "0.1.0",
  "editorialStatus": "drafted",
  "requirements": [],
  "demoCapabilities": [],
  "implementationNote": "尚无可操作的样本；插图为编辑示意。落地到产品时仍须验证：模块与间距尺寸是否在响应式断点下保持一致的比例关系、跨模块区块在窄屏折叠为单列后的阅读顺序是否仍与 DOM 顺序一致、以及内容长度变化时是否会破坏模块对齐。",
  "image": {
    "src": "/images/modular-grid.webp",
    "alt": "一个虚构的 FIELDNOTES 编辑页面，铺在可见的行列模块网格上，其中的区块分别跨越 2x1、1x2 与 2x2 个模块，网格线在区块之间若隐若现。"
  },
  "searchTerms": [
    "grid",
    "modules",
    "typography",
    "alignment",
    "layout"
  ]
}