column-width 是建议宽度而非强制分割，需父容器设 width 或 max-width 才生效；多列与视差滚动原生不兼容，应改用 Grid/Flex 模拟列结构并手动实现视差。
column-width 设置后内容不按预期分列？
多数情况下不是 column-width 失效，而是父容器缺少必要约束。CSS 多列布局（columns）是“建议宽度”而非强制分割，浏览器会根据内容、断行规则和可用空间动态调整实际列数。
常见错误现象：column-width: 200px 却只显示一列；文字被强行截断在列末尾；图片跨列错位。
- 必须设置
column-count或column-width二者之一，但仅设column-width时，父容器需有明确的width或max-width（如width: 100%在 flex 容器中可能失效） - 避免对子元素设
break-inside: avoid，否则整块内容会被塞进同一列 - 图片默认是 inline 元素，易被拆分，应加
break-inside: avoid;或包裹在display: block
article {
columns: 200px;
column-gap: 2rem;
width: 100%; /* 必须显式声明 */
}
article img {
break-inside: avoid;
width: 100%;
}视差滚动和多列布局能一起用吗？
能，但不能直接靠 background-attachment: fixed 实现——多列容器自身不产生滚动上下文，它的子列是碎片化渲染的，fixed 背景会相对于视口固定，而非相对于列内容。
真正可行的方式是：把每列内容封装为独立滚动区域（如 overflow-y: scroll），再对每个区域单独实现视差；或放弃原生多列，改用 display: grid / flex 模拟列结构，再用 transform: translateY() 配合滚动监听做视差。
立即学习“前端免费学习笔记（深入）”；
- 原生
columns+background-attachment: fixed在 Safari 和部分 Chrome 版本中行为不一致，慎用 - 若坚持用多列，可对
::column-span（目前仅 Firefox 支持）配合position: sticky做局部视差标题，但兼容性极差 - 更可靠的做法：用 JS 监听
scroll，读取每个“伪列”容器的getBoundingClientRect().top，动态更新其子元素的transform
column-width 与响应式断点怎么协同？
column-width 本身不具备媒体查询能力，但它天然响应容器尺寸变化——只要父容器宽度随屏幕缩放，列数就会自动增减。关键在于控制“何时开始分列”和“最大列数限制”。
- 用
column-count: 1+ 媒体查询逐步放开：小屏单列，中屏两列，大屏三列，比单纯依赖column-width更可控 - 避免同时设
column-count和column-width，否则后者仅作最小宽度提示，列数仍由前者主导 - 移动端慎用多列：iOS Safari 对
columns的重排性能较差，长文本滚动易卡顿；可用@supports (columns: 1)做特性检测降级
@media (min-width: 768px) {
article { columns: 250px; }
}
@media (min-width: 1200px) {
article { columns: 300px; }
}多列布局的“流式”本质决定了它不适合强视觉控制场景；而视差效果依赖精确的滚动锚点和层级关系——两者底层机制冲突明显。真要组合使用，优先考虑用 Grid 拆解结构，再用 transform 和 will-change 手动实现视差，比硬套 columns 更稳定。
