--gap自定义属性可统一控制gap、column-gap等间距，避免布局不一致；其值建议用rem/em，需同步更新相关布局参数，且需理解Grid与Columns中gap的不同语义。
用 --gap 自定义属性统一控制 gap 和 column-gap
直接在 :root 或组件作用域里定义 --gap，就能让 gap、column-gap、row-gap 甚至 padding 同步响应。这是最干净的解耦方式，避免重复写死数值。
常见错误是只改了 gap 却忘了 column-gap，导致 Grid 和 Columns 布局行为不一致；或者在媒体查询里漏掉某一处 gap 更新，造成断点错位。
-
--gap值建议用 rem 或 em，避免 px 在缩放时失真 - 若同时用 Grid 和 Columns 方案（比如降级 fallback），必须确保两者都引用同一变量：
gap: var(--gap);和column-gap: var(--gap); - 不要把
--gap设为 0 后再靠margin模拟间距——这会破坏网格项对齐逻辑，且 break-inside 失效风险升高
Grid 布局中 gap 对 grid-auto-rows 的隐式影响
gap 不仅是视觉间距，它参与网格轨道计算。当设置 grid-auto-rows: minmax(200px, auto) 时，浏览器会在每行“内容高度 + gap”之后才开始下一行分配——这意味着 gap 实际抬高了行基准线。
典型表现：卡片高度接近 grid-auto-rows 最小值时，多出的 gap 会让后续项“跳过一整行”，出现意外空白。这不是 bug，是规范行为。
立即学习“前端免费学习笔记（深入）”；
- 调试时可用 DevTools 的 Layout 面板勾选 “Show grid line numbers”，观察 gap 是否被计入轨道尺寸
- 若需严格控制行高节奏，把
gap拆进卡片的margin-bottom，并设gap: 0——但此时要手动处理最后一行底部留白 - 慎用
grid-row-gap单独覆盖：它不会影响grid-auto-flow: dense的重排逻辑，容易和gap冲突
Columns 布局里 column-gap 和 break-inside: avoid 的协作边界
column-gap 是纯视觉分隔，不参与列宽计算；但 break-inside: avoid 的生效前提是卡片总高度 ≤ 当前列剩余空间。一旦 column-gap 过大，列可用高度变小，就更容易触发卡片被挤到下一列开头——看起来像“间距吃掉了内容”。
尤其在小屏或字体放大的场景下，这种挤压更明显。不是样式没生效，而是布局约束已改变。
- 测试时务必开启系统字体缩放（如 macOS 的“更大字体”或 Windows 的 125% 缩放）
- 如果卡片含图片，记得给
img加max-width: 100%和height: auto，否则图片撑破列宽会强制换列 - 避免在
.card上设固定height：它会锁死 break-inside 的判断依据，让卡片宁可截断也不换列
响应式切换时 --gap 的阶梯值设计要点
别用线性插值（比如从 0.5rem → 1.5rem），人眼对间距变化敏感度是非线性的。实际项目中，三档就够了：移动端 --gap: 0.75rem、平板 --gap: 1rem、桌面 --gap: 1.25rem。
更大的陷阱在于：媒体查询里只改了 --gap，却没同步调整 column-count 或 minmax() 的最小宽度。结果列数没变，间距变大，卡片被“撑散”，留白失控。
- 推荐组合更新：
@media (min-width: 768px) { :root { --gap: 1rem; } .masonry-grid { column-count: 3; } } - 如果用 JS 动态加载内容，记得监听
resize后调用getComputedStyle(document.documentElement).getPropertyValue('--gap')确认当前值，别缓存旧变量 - 自定义属性本身不触发重排，但它的消费方（
gap、column-gap）会——所以频繁修改--gap可能引发 layout thrashing，尤其在滚动中
真正难的不是写对那几行 CSS，而是理解 gap 在 Grid 和 Columns 中扮演的不同角色：一个是轨道间隙，一个是视觉分隔；一个影响自动行高计算，一个影响列内断裂逻辑。混用时，它们不会自动对齐语义。
