没有栅格约束的页面，间距靠感觉、对齐靠肉眼，多端一变就崩。栅格系统提供统一的列、间距与断点规则，让布局有章可循。
12 栅格是通用选择：12 的约数多（2/3/4/6），能灵活组合出各种比例布局。
原则：栅格是参考系，不是枷锁。必要时可打破栅格，但要有意识地打破。
掌握这几个概念，布局体系就立住了。
12/24 栅格，灵活组合占比。
列与列之间的统一间距。
手机/平板/桌面/大屏的切换点。
Flex/Grid 实现自适应的能力。
区块内部再次栅格化。
左对齐/居中/两端对齐的规范。
从零建立一套可复用的布局系统。
按设备与内容确定断点阈值（如 576/768/992/1200），统一全局。
选 12 栅格，定水槽与外边距，形成设计基线。
将栅格封装为 Row/Col 组件，业务直接组合使用。
在真实设备上回归各断点下的布局表现与间距节奏。
一套常用的断点参考。
| 断点 | 宽度 | 典型设备 |
|---|---|---|
| xs | < 576px | 手机竖屏 |
| sm | ≥576px | 手机横屏 |
| md | ≥768px | 平板竖屏 |
| lg | ≥992px | 平板横屏/小桌面 |
| xl | ≥1200px | 桌面/大屏 |
Grid 适合二维整体布局，Flex 适合一维排列。实际往往混用：整体用 Grid，内部用 Flex。
用统一的间距令牌（4/8/16/24px 等），不要手写随机数值，栅格与间距体系一起用。
给列设置最小宽度与自适应规则，配合容器查询在窄屏自动堆叠。
内容型页面建议用栅格保证秩序；营销页可更自由，但内部区块仍应保持对齐节奏。
