column-gap本身不响应式，必须配合媒体查询或clamp()函数等策略才能实现移动端适配；单独设置固定值会导致小屏挤压、大屏局促，且仅在启用columns/column-count的多列上下文中生效。
column-gap 本身不响应式，必须配合触发条件和适配策略才能在移动端真正“随屏变化”。单独写 column-gap: 16px 在小屏上会撑满列宽、大屏上又显局促，这不是属性问题，而是没建立动态关联。
为什么直接设 column-gap 在手机上总显得太宽或太挤
根本原因是：移动端屏幕宽度跨度大（320px–1200px），而 column-gap 是静态长度值，它不感知视口变化。更关键的是，column-gap 只在多列上下文里生效——如果内容不够长、或列数没显式指定，它压根不会渲染。
- 小屏（如 iPhone SE）下，
column-gap: 24px占比可能超 7%，列内容被严重压缩 - 平板横屏时，同样 24px 显得单薄，视觉节奏断裂
- 若只用
em，父级font-size一变，间隙就偏移（比如font-size: 0.875em下column-gap: 2em实际只有 1.75em） -
%单位在多列布局中被浏览器直接忽略，写了也无效
用 clamp() + CSS 变量实现真响应式 column-gap
这是目前最轻量、无需媒体查询、且兼容性可控的方案。核心是把 column-gap 绑定到视窗宽度，同时设上下限防止极端情况。
- 在
:root中定义变量：--gap: clamp(12px, 3vw, 24px)—— 最小 12px（保小屏可读），最大 24px（防大屏过松），中间按 3% 视宽弹性伸缩 - 必须搭配
columns或column-count才能激活多列上下文，例如：.text { columns: 2; column-gap: var(--gap); } - Safari ≤ 14.1 需补前缀：
-webkit-column-gap: var(--gap)；Can I Use 数据显示 Safari 15.4+ 才完全移除前缀依赖 - 避免和
column-rule混用过窄值：若设column-rule: 1px solid #ccc，column-gap建议 ≥ 20px，否则规则线会“吃掉”太多空白，造成视觉拥挤
媒体查询断点法：适合列数也要变的场景
当不只是间距要调，列数本身也需随设备增减（比如手机 1 列 → 平板 2 列 → 桌面 3 列），媒体查询仍是清晰可靠的选择。
立即学习“前端免费学习笔记（深入）”；
- 基础样式先设最小屏适配：
.article { column-count: 1; column-gap: 12px; } - 平板起始（768px）切为两列：
@media (min-width: 768px) { .article { column-count: 2; column-gap: 20px; } } - 桌面端（1024px+）升为三列：
@media (min-width: 1024px) { .article { column-count: 3; column-gap: 24px; } } - 注意：不要只写
column-gap而漏掉column-count或column-width，否则整个多列上下文不成立，column-gap形同虚设 - 内容过短时浏览器会自动退化为单列，此时
column-gap不参与渲染——测试务必用足够长的文本
真正容易被忽略的是：多列布局的列高默认不均衡（column-fill: auto），即使 column-gap 设得再准，最后一列可能明显偏短，看起来像“错位”。如需视觉齐平，得加 column-fill: balance，但要注意它会让渲染稍慢，且 gap 仍参与高度计算——这点在首屏内容少的页面尤其明显。
