Flex/Grid间距必须用gap控制，禁用margin；文本流分栏用column-gap；混用display和column-count会导致间距失效；gap需配合媒体查询响应式调整。
用 gap 调整 Flex/Grid 分栏间距，别碰 margin
Flex 和 Grid 容器的列/行间距必须用 gap 控制，这是布局级属性，不会干扰子项尺寸计算或响应式断点行为。手动给子元素加 margin 会导致：小屏堆叠时左右外边距残留、媒体查询切换后错位、flex-wrap: wrap 下换行错乱。
常见错误现象：两栏之间看起来有空隙，但 inspect 发现是右栏的 margin-left，结果在手机上变成左侧留白+右侧溢出。
-
gap可设单值（如gap: 12px）统一控制行列间距；双值（如gap: 12px 24px）则分别对应 row-gap / column-gap - Grid 中
gap会自动适配auto-fit和minmax()，比如grid-template-columns: repeat(auto-fit, minmax(300px, 1fr))配合gap: 16px，列数变化时间距始终一致 - Flex 中
gap在 IE11 不支持（需降级用margin+ 媒体查询兜底），但现代项目可放心用 —— Chrome/Firefox/Safari/Edge 全支持
column-gap 是文本流分栏唯一可靠的间距控制方式
对 column-count 或 column-width 实现的多列文本排版，必须用 column-gap，而非 margin 或 padding。后者只会撑开容器整体宽度，无法在栏与栏之间插入空白。
使用场景：新闻正文、长篇文章、法律条文等需要自动断行的连续文本。
立即学习“前端免费学习笔记（深入）”；
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
-
column-gap: 20px表示相邻两栏之间的净空，不包含column-rule的线宽 - 若同时设了
column-rule: 2px dashed #ccc，实际视觉间距 =column-gap+column-rule-width - 注意：IE10+ 支持
column-gap，但旧版 Safari（≤13.1）需加-webkit-column-gap前缀
响应式切换时，gap 值必须随断点显式重写
gap 不会自动缩放，也不会继承父级比例。小屏堆叠为单列时，你可能希望去掉水平间距；三栏变两栏时，又得加大间距避免拥挤——这些都得靠媒体查询手动覆盖。
容易踩的坑：只在基础样式里写了 gap: 24px，以为大屏小屏都适用，结果手机上文字紧贴屏幕边缘，阅读吃力。
- 推荐断点策略：
@media (max-width: 768px) { .container { gap: 16px; } }（平板）；@media (max-width: 480px) { .container { gap: 12px; } }（手机） - 文本流分栏更敏感：小屏应强制单列 + 清除
column-gap，例如@media (max-width: 480px) { .article { column-count: 1; column-gap: 0; } } - 别用
rem或vw直接设gap值——它和字体缩放、视口变化无逻辑关联，反而让间距失控
混用 display: flex/grid 和 column-count 会让 gap 和 column-gap 全部失效
这是最隐蔽也最常被忽略的问题：父容器同时声明了 display: grid 和 column-count: 3，结果什么间距都不生效，连 column-rule 都不出现在 DevTools 里。
原因很直接：column-count 只在块级流（display: block 或 inline-block）下工作；一旦父元素是 flex 或 grid，浏览器直接忽略所有 multi-column 属性。
- 结构化分栏（卡片、模块）→ 用
display: grid+gap - 文本流分栏（文章、说明）→ 用
display: block+column-count/column-width+column-gap - 想在 Grid 容器里放一段多栏文本？只能把它包进一个独立的
<div class="text-column">，且该 div 必须是display: block
