gap在多列布局中不管用，仅对grid和flex有效；多列布局需用column-gap替代，且其与gap同名不同源，属multi-column模块。
gap 属性在多列布局中到底管不管用
管用，但只对 display: grid 和 display: flex 有效，column-count 或 column-width 这类纯 CSS 多列（multi-column）布局完全不认 gap。
这是最常踩的坑：以为写了 gap: 1rem 就能统一所有“列间距离”，结果发现文字分栏毫无反应。
-
grid和flex中的gap控制的是容器内直接子元素之间的间距，行为稳定、语义清晰 - 多列（
columns）是文本流内部的断裂机制，没有“子项”概念，所以gap对它无效 - 想在多列中模拟间隙？只能靠
column-rule（画线）或给内容加padding+break-inside: avoid配合控制断点
grid 布局下 gap 的行列独立控制
gap 支持分别设置行距和列距，写法是 row-gap 和 column-gap，或者简写为 gap: <row> <column> —— 注意顺序是「行在前、列在后」，和 margin 的顺时不同。
比如 gap: 12px 8px 表示行间距 12px、列间距 8px；漏掉第二个值则行列等距。
立即学习“前端免费学习笔记（深入）”；
- 在响应式中建议优先用
row-gap/column-gap单独设，避免简写覆盖意外 -
gap不会作用于网格容器自身 padding 或 border，但会影响子元素的可用空间计算 - 旧版 Safari（≤15.4）对
gap在flex中支持不全，若需兼容，grid下更稳
flex 布局中 gap 的实际表现限制
gap 在 flex 中只在主轴方向生效：横向 flex-direction: row 时控制列间距，纵向 flex-direction: column 时控制行间距。它无法同时控制两个方向 —— 因为 flex 本身就是单轴布局模型。
常见误解是拿它当「二维间距控制器」，结果在换行（flex-wrap: wrap）后发现交叉轴没间隙。
- 多行
flex想控交叉轴间距？只能用margin手动调，或改用grid -
gap不会撑开align-items的对齐范围，但会增大项目之间的净距离 - 当子元素用了
margin，gap是额外叠加的，不是替代关系
多列（columns）布局中替代 gap 的真实方案
真要用 column-count 做新闻栏、文档分栏，又想要列之间有留白，唯一可靠方式是结合 column-gap —— 注意，这不是通用 gap，而是多列专属属性，且仅作用于列与列之间，不能控制行内块级元素的垂直间距。
它和 gap 同名但不同源，CSS 规范里属于 multi-column 模块，浏览器支持度比 flex 下的 gap 还好。
-
column-gap接受length或normal（约 1em），不支持百分比 - 和
column-rule共存时，column-rule画在column-gap的中间，宽度会计入总间隙 - 如果列内容高度差异大，视觉上「间隙不一致」其实是内容撑开导致的，
column-gap本身始终均匀
gap 看似简单，但跨布局模型时行为割裂得厉害。别指望一个属性通吃 grid / flex / columns —— 关键是先看清自己用的是哪个布局上下文，再选对应的那个「gap」。
