建立页面结构时定义响应式布局网格：统一列数、间距…

在建立页面结构时，定义跨断点一致且灵活的响应式网格系统。

适用场景

解决思路

1. 定义列数：移动端通常 4 列，平板通常 8 列，桌面端通常 12 列。
2. 定义列间距 gutters：典型值为 16px、24px 或 32px。
3. 定义页面外边距 margins：移动端 16px，桌面端 24–48px。
4. 定义断点 breakpoints：例如 375px、768px、1024px、1440px，并在这些点调整布局。
5. 选择列网格 column grid：用等宽列处理通用布局。
6. 选择模块化网格 modular grid：用列 + 行组成模块。
7. 选择基线网格 baseline grid：用 4px 或 8px 对齐垂直节奏。
8. 选择复合网格 compound grid：用重叠网格处理复杂布局。
9. 设置流体行为 Fluid：让列按比例拉伸。
10. 设置固定行为 Fixed：使用 max-width 容器并居中内容。
11. 设置自适应行为 Adaptive：为每个断点使用不同布局。
12. 应用减少列数 Column dropping：在较小尺寸下减少列数。
13. 使用 full-bleed 模式：让内容占满整个视口。
14. 使用 contained 模式：设置 max-width 并保留边距。
15. 使用 asymmetric 模式：采用侧边栏 + 主内容布局。
16. 使用 card grids 模式：使用 auto-fill 生成响应式卡片网格。
17. 保持 gutters 和 margins 一致。
18. 将内容对齐到网格，而不是随意摆放。
19. 在每个断点都测试，不只测试两端极端尺寸。
20. 为开发者记录网格规格。
21. 允许为了强调而有意打破网格。

适用边界 · 注意事项

• 不要用于组件内部的间距比例；组件内部间距应使用 `spacing-system`。
• 不要用于处理跨设备行为本身；跨设备行为应使用 `responsive-design`。