column-count“错位”因按内容流切分而非块级元素，导致卡片被截断；需用break-inside: avoid保障完整，优先column-width响应式更稳，真瀑布流仍依赖JS方案。
column-count 布局为什么看起来“错位”了
因为 column-count 是按内容流顺序切分的，不是按元素块切分。它把整段 HTML 当成一长条文本去“折行”，article 或 li 这类块级元素会被硬生生从中间劈开——图片卡在左列、标题掉到右列，就是典型表现。
- 只适合纯文字或高度一致的卡片（比如每张卡片固定
height: 200px） - 遇到图片加载延迟、字体渲染差异、动态内容插入，错位会更明显
-
column-fill: balance（默认值）会让各列高度尽量相等，但无法避免单个卡片被截断
怎么让每个文章卡片完整不被切开
必须用 break-inside: avoid 告诉浏览器：“这个盒子别劈开”。但它只对块级容器生效，且需要配合 display: block（某些标签如 article 默认已是）。
- 给列表项加样式：
article { break-inside: avoid; }或li { break-inside: avoid; } - 如果卡片内有 flex / grid 布局，确保最外层容器设了
break-inside，子元素不用重复设 - IE 不支持
break-inside，需用-webkit-column-break-inside: avoid兼容旧版 Safari
column-count 在响应式里怎么安全切换列数
直接写 column-count: 3 在小屏上会挤成窄缝，文字过小难读。不能只靠媒体查询改列数，还得控制最小列宽和间隙。
- 优先用
column-width替代column-count：column-width: 300px让浏览器自动算列数 - 搭配
column-gap: 2rem防止列太密；column-rule可加分割线，但会影响可访问性 - 移动端慎用：部分安卓 WebView 对
column-*渲染不稳定，建议max-width: 768px时退回到单列column-count: 1
比 column-count 更靠谱的瀑布流替代方案
column-count 本质是排版工具，不是布局工具。真要实现 Pinterest 那种高低不一、自动贴靠的瀑布流，CSS 本身没原生解法。
立即学习“前端免费学习笔记（深入）”；
- CSS
grid的grid-template-columns: repeat(auto-fill, minmax(300px, 1fr))+grid-auto-flow: dense能模拟，但无法真正“按高度排序” - JS 方案（如
Masonry库）仍是主流：监听图片加载完成、动态计算位置，兼容性和效果最稳 - 如果只是想视觉上“像瀑布流”，用
flex-wrap分多组（每组 2–3 项）+align-items: flex-start，反而更可控
column-count 的坑不在写法，而在预期——它解决的是报纸排版问题，不是动态卡片布局问题。真要上线，先测 iOS Safari 和微信内置浏览器里的实际切分效果，别只看 Chrome 开发者工具。
