做页面时最耗精力的不是画出一个模块，而是不断决定它应该放哪、间距是多少、与旁边是否对齐。没有网格系统时，这些决定会在每个模块上重复出现，最终页面会充满微小的不一致。网格的价值就是把这些决定提前做掉：列宽、边距、间距、对齐线都被预先定义，设计时只需要在有限选项里选择。
当选择变少，布局会更统一，协作也更顺。开发实现时也更容易，因为网格能直接映射到样式变量和断点规则。你不是在画一张漂亮的图，而是在搭一个可持续维护的结构。
网格的第一步不是画很多线，而是确定内容容器宽度以及左右边距。容器决定了页面的“舞台”，边距决定了呼吸感。很多布局显得挤，是因为容器过宽或边距过小，导致内容一直贴近屏幕边缘。确定容器后，再决定列数，例如常见的十二列或八列。列数越多可组合性越强，但也更容易被滥用。
如果团队缺少经验，建议从更少的列开始，例如八列，让组合更简单。列少并不意味着不灵活，只要间距与跨列规则明确，仍然能覆盖大部分模块。
网格系统里最容易被忽略的是间距。很多页面对齐看起来差不多，但间距到处是 11、13、17 这种数字，导致整体节奏很乱。建议把间距定义成少量档位，例如 4、8、12、16、24、32。模块内部用小档位，模块之间用大档位。档位越少，节奏越稳定。
间距档位还应该和字体行高、图标尺寸对应。比如正文行高 24 时，段落间距可以用 12 或 16，让文本块的节奏更自然。网格不是只管对齐线，它也管节奏。
一屏里出现太多对齐线，会让用户视线来回跳。理想状态是主内容区只出现少量对齐线，例如左对齐线、卡片内边距线、以及局部的表格对齐线。对齐线一旦确定，就不要在相似模块之间随意变化。比如列表里的标题左边距要一致，卡片里图标到文字的距离要一致。
当你需要打破对齐来做强调时，优先用容器层的变化，例如让某个模块跨更多列、增加留白、或者改变背景块，而不是让文字突然偏移到一条新的对齐线上。强调应当建立在稳定结构上，否则会像排版失控。
很多响应式布局的错误做法是把桌面布局整体缩小塞进手机，结果字号变小、点击目标变小、信息变得难读。正确做法是基于网格重新分配列：桌面可能是多列并排，移动端应该改为单列堆叠，保留相同的间距节奏与模块顺序。
网格在不同断点可以有不同列数，但要保持同一套间距档位和边距逻辑。这样用户在不同设备上会感到熟悉，而不是像换了一个产品。
网格系统最终要落在组件上。卡片的内边距、列表的缩进、按钮的最小宽度，都应该与网格的间距档位关联。你可以把网格当成组件的默认骨架，所有新组件都从骨架出发，减少自由发挥。这样做不是限制创意，而是把创意用在更关键的地方，例如信息结构与视觉叙事，而不是反复纠结 2 像素的差距。
当网格成为习惯，你会发现页面“干净”不再需要刻意追求，它会变成自然结果。干净的来源不是空，而是秩序。
有时你把所有元素都对齐了，但页面仍然显得乱，原因往往是分组边界不清。对齐解决的是横向关系，分组解决的是语义关系。建议检查模块之间是否有清晰的层级：标题是否真正像标题，说明是否真正像说明，操作是否真正像操作。把语义分组做清楚，再用网格去承载，会比单纯拉对齐线更有效。
另一个原因是视觉重量不均。有的模块跨列太多、有的模块过窄，导致视线在左右摇摆。网格的使用要有主次：主叙事模块占更大的列宽，辅助信息占更小的列宽。让主次稳定，用户扫读时才不会迷路。
有时你把所有元素都对齐了，但页面仍然显得乱，原因往往是分组边界不清。对齐解决的是横向关系，分组解决的是语义关系。建议检查模块之间是否有清晰的层级：标题是否真正像标题，说明是否真正像说明，操作是否真正像操作。把语义分组做清楚，再用网格去承载，会比单纯拉对齐线更有效。
另一个原因是视觉重量不均。有的模块跨列太多、有的模块过窄，导致视线在左右摇摆。网格的使用要有主次：主叙事模块占更大的列宽，辅助信息占更小的列宽。让主次稳定，用户扫读时才不会迷路。
有时你把所有元素都对齐了，但页面仍然显得乱，原因往往是分组边界不清。对齐解决的是横向关系，分组解决的是语义关系。建议检查模块之间是否有清晰的层级：标题是否真正像标题，说明是否真正像说明，操作是否真正像操作。把语义分组做清楚，再用网格去承载，会比单纯拉对齐线更有效。
另一个原因是视觉重量不均。有的模块跨列太多、有的模块过窄，导致视线在左右摇摆。网格的使用要有主次：主叙事模块占更大的列宽，辅助信息占更小的列宽。让主次稳定，用户扫读时才不会迷路。
有时你把所有元素都对齐了，但页面仍然显得乱，原因往往是分组边界不清。对齐解决的是横向关系，分组解决的是语义关系。建议检查模块之间是否有清晰的层级：标题是否真正像标题，说明是否真正像说明，操作是否真正像操作。把语义分组做清楚，再用网格去承载，会比单纯拉对齐线更有效。
另一个原因是视觉重量不均。有的模块跨列太多、有的模块过窄，导致视线在左右摇摆。网格的使用要有主次：主叙事模块占更大的列宽，辅助信息占更小的列宽。让主次稳定，用户扫读时才不会迷路。
