column-width 更适合自适应场景，column-count 更适合固定列数控制；二者不可共存，浏览器优先采用 column-width，column-count 仅在 column-width 为 auto 时生效。
column-count 与 column-width 到底该选哪个？
直接说结论：column-width 更适合自适应场景，column-count 更适合固定列数控制。但二者不能共存——浏览器会优先采用 column-width，忽略 column-count（除非 column-width 为 auto）。如果你希望列宽随容器缩放、列数自动变化，必须用 column-width；如果硬要“必须是 4 列”，那就只能用 column-count，并配合媒体查询做断点适配。
用 CSS 自定义属性动态控制 column-width
自定义属性（--col-width）本身不能直接参与 column-width 计算，因为该属性不接受 CSS 变量作为值（截至 2026 年，所有主流引擎仍不支持 column-width: var(--col-width)）。但你可以绕过这个限制：
- 用
@property注册一个受控的自定义属性（需启用inherits: false和syntax: "<length>"</length>），再在column-width中引用它 —— 仅 Chromium 120+ 支持，Firefox / Safari 仍不认 - 更通用的做法：用 JS 读取
getComputedStyle获取--col-width值，再写入内联样式style.columnWidth = value - 最稳妥的方案：把自定义属性只用于计算列数，例如
column-count: clamp(2, calc(100vw / var(--col-width)), 6)—— 注意这行无效！column-count不接受calc()，所以只能用 JS 驱动
为什么 break-inside: avoid 必须加，且不能只靠 class
break-inside: avoid 是防止子元素被跨列截断的关键。但很多人漏掉两点：
- 它必须作用于每个
.item元素上，而不是父容器；否则浏览器仍可能把一个div拆成两半分到不同列 - 若
.item内部有display: flex或position: absolute子元素，某些旧版 Safari 会忽略break-inside，需额外加-webkit-column-break-inside: avoid - IE 完全不支持该属性，
column-count在 IE9+ 才开始支持，但无断行控制能力，实际项目中需降级为单列或 JS 方案
column-gap 和 gap 的行为差异容易被忽略
column-gap 控制的是多列布局中列与列之间的空白，而 gap 在 Grid/Flex 中才生效。它们互不兼容：
- 在
column-count布局里，写gap: 1rem完全无效，必须用column-gap: 1rem -
column-gap不支持百分比值（如column-gap: 5%会被忽略），只接受<length></length>或<percentage></percentage>（但后者在多数浏览器中未实现） - 如果同时用了
column-gap和padding，注意总宽度 = 容器宽 − 左右 padding − (列数 − 1) × column-gap，超出会触发横向滚动
column-count 布局会强行把矮元素“顶”到高图下方，造成视觉断层——这不是 bug，是规范定义的行为。这时候你得接受：纯 CSS 瀑布流本质是「文本流分栏」，不是「Masonry 式智能填充」。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
