模块化栅格系统本质是约束下的自由，核心控制变量为--grid-unit（最小度量单位）、--grid-columns（当前断点列数）和--grid-gutter（固定间隙），三者须严格整数倍关联，并通过@media切换，而非简单使用repeat(12, 1fr)。
模块化栅格系统本质是约束下的自由
模块化不是把页面切成固定块然后硬塞内容，而是定义一套可复用、可组合、可推演的尺寸与位置规则。它不追求“万能模板”，而是在列数、间距、最小单位这些参数上做明确取舍——比如 12列 是为了兼容 2/3/4/6 等分逻辑，8px 作为基准间距是因为它能被多数字体大小整除，也方便缩放。一旦定下这些基础参数，后续所有容器、卡片、表单的宽度和留白就不再靠“感觉”，而是查表或计算得出。
为什么不能直接用 grid-template-columns: repeat(12, 1fr)
看似简洁，但实际会破坏模块化意图：
-
1fr在不同容器宽度下产生非整像素值，导致子元素边缘模糊或渲染错位（尤其在高DPI屏） - 无法体现“最小单位”约束，比如你希望所有内边距必须是
8px的整数倍，但1fr不保证这点 - 响应式断点切换时，
repeat(12, 1fr)无法自然过渡到repeat(4, 1fr)，中间缺少语义层（比如“移动端单列”应显式声明为100%，而非隐式推导）
模块化栅格真正要控制的三个变量
不是列数、不是间距、不是容器宽度——而是这三个：
-
--grid-unit：CSS 自定义属性定义的最小度量单位（如8px），所有padding、gap、margin都基于它计算 -
--grid-columns：当前断点下的有效列数（如桌面端12，平板8，手机1），用于生成calc(100% / var(--grid-columns))类宽度 -
--grid-gutter：列间/行间固定间隙（如16px），必须是--grid-unit的整数倍，否则模块对齐失效
这三个变量用 @media 切换，其他样式全部引用它们——这才是模块化能落地的关键。
立即学习“前端免费学习笔记（深入）”；
容易被忽略的兼容性陷阱：gap 在 Flexbox 中不可靠
很多人想用 display: flex + gap 实现模块化栅格，但要注意：
-
gap在旧版 Safari（ - Flexbox 的
flex-wrap: wrap在内容高度不一致时，会导致行高塌陷，而 Grid 的grid-auto-rows可控性强得多 - 模块化要求“列宽严格等分”，Flexbox 的
flex-basis在百分比下易受父容器 padding 影响，Grid 的grid-template-columns更稳定
真要模块化，优先选 display: grid，别为了兼容老浏览器倒退回浮动或表格布局——那些已经不是“模块化”，只是“勉强能排”。
