column-width优先于column-count，二者混用会导致列数计算异常；子项须为直接子元素且设break-inside: avoid；图片需预设宽高比防塌陷；grid推荐auto-fit+row流式布局。
column-count 和 column-width 别混用，优先用 column-width
列数分布不均，90% 是因为同时写了 column-count 和 column-width。浏览器会忽略 column-count，按 column-width + column-gap 算实际列数，但这个计算受缩放、字体渲染、子项内边距等隐式干扰，导致小屏下本该 1 列却显示半列空白，或大屏下该 4 列只出 3 列。
-
column-width: 280px是“建议最小列宽”，容器宽度 ÷ (280px+column-gap) 向下取整 → 实际列数 - 小屏时（比如 320px 宽）自动退化为 1 列，无需 media query hack
- 别写
column-count: 3; column-width: 280px;—— 冲突规则会让行为不可预测
子项必须是直接子元素，中间不能套 wrapper
DOM 层级一多，break-inside: avoid 就失效，浏览器无法准确判断卡片真实高度，内容被硬切进下一列，视觉上就出现“某列突然变短”或“相邻列高度差极大”。
- 正确结构：
<div class="waterfall"> <div class="item">...</div> <div class="item">...</div> </div> - 错误结构：
<div class="waterfall"><div class="wrapper"><div class="item">...</div></div></div>—— 此时break-inside得加在.wrapper上，且它必须是块级、无 transform/absolute - 检查 DevTools 中的 computed styles，确认每个
.item的break-inside确实生效（不是被覆盖或 inherited）
图片加载前高度塌陷会拖垮列高均衡
没预留空间的 <img> 渲染时高度为 0，浏览器按“空行”分配列高，等图加载完突然撑开，导致列间错位、底部留白、甚至滚动跳变——这不是列数不均，而是列高计算被破坏后的连锁反应。
- 现代方案：给
.item加aspect-ratio: 4/3（或对应比例），让容器自带宽高比 - 兼容旧浏览器：用 padding-top 占位，例如
padding-top: 75%（4:3）+position: relative，再把<img>绝对定位铺满 - 禁用
img { height: auto }类全局样式，它会压缩父容器高度 - 别依赖
width/heightHTML 属性，它们在响应式布局中不参与 CSS 计算
Grid 方案里 auto-fit 比 auto-fill 更稳
用 grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) 时，空列仍占位，容器窄时可能挤出 4 列但每列只有 100px 宽；而 auto-fit 会收缩未填充的列，让可用空间重新分配，列数更符合人眼预期。
- 必须配
grid-auto-flow: row（不是column），Safari 对后者支持差，易错行 -
gap: 16px控制间距，别在.item上设margin，否则 Grid 把 margin 当作列宽一部分，列数变少 - Firefox 下若
gap错位，可改用margin-bottom: 16px+:last-child { margin-bottom: 0 }补偿
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
