图片未设 aspect-ratio 时高度默认为0，导致grid项塌陷、加载后跳动；必须用 aspect-ratio 或 width/height 属性提前预留空间，配合 grid-auto-flow: dense 和 minmax() 响应式列布局实现稳定瀑布流。
图片没设 aspect-ratio 就渲染，布局直接塌陷
浏览器渲染 <img> 时，如果既没写 width/height 属性，也没设 aspect-ratio，它的高度默认为 0。Grid 或 Flex 容器按 0 高分配空间，等图片加载完突然撑开，列高错位、元素跳动、滚动条乱抖——这不是“瀑布流不稳”，是容器根本不知道图该占多大地方。
必须提前预留空间：
- 现代浏览器（Chrome 109+、Firefox 110+、Safari 16.4+）直接用
aspect-ratio: 4/3（或对应实际比例），width: 100%即可自适应； - 旧版 Safari 需 fallback：用
padding-bottom+position: relative+position: absolute做占位； - 绝对不要只写
width: 100%且不设任何高度约束，这是塌陷主因； - 服务端能提供宽高信息的，优先在 HTML 中写死
width和height属性（如<img style="max-width:90%" style="max-width:90%">），CSS 会据此计算 intrinsic aspect ratio。
grid-auto-flow: dense 是瀑布感的核心，但依赖 item 自撑高
靠 column-count 实现的“伪瀑布流”本质是文本流切片，DOM 顺序和视觉顺序错位，无障碍和 SEO 全崩；真正可用的是 Grid + grid-auto-flow: dense，但它不会帮你“算高度”，只负责把短 item 往前塞空隙——前提是每个 .item 必须有明确高度。
所以关键不是 Grid 怎么配，而是怎么让每个卡片撑起来：
-
.item { display: grid; }内部用aspect-ratio控制图片区域，文字区域用min-height或grid-template-rows锚定； - 避免在
.item上写height: auto同时又没内容兜底，否则 dense 模式会失效； -
grid-auto-rows: 10px是必需的“占位行高”，否则 Grid 认为“没行”，dense 调度无从谈起； - 别手动写
grid-row-end: span 3—— 图片高度不可控，跨几行根本没法预设。
响应式列数切换时，grid-template-columns 必须用 minmax()
小屏变 1 列、中屏变 2 列、大屏变 3 列，不能靠 JS 动态改 class 或媒体查询硬切，否则 resize 或 SSR 水合后容易错位。正确写法是单条声明驱动：
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr))
解释一下为什么这行代码管用：
-
minmax(280px, 1fr)表示每列最小 280px，最大均分剩余空间，窄屏下自然缩成 1 列； -
auto-fill保证容器有空就填列，比auto-fit更稳定（后者会合并空列）； - 别用
repeat(3, 1fr)硬编码列数，否则屏幕一缩，图片被强行挤压变形； - gap 统一用
gap: 12px，不用 margin，避免因 collapse 或重排导致列宽计算偏差。
图片加载失败或懒加载未触发时，alt 文本撑不开高度
alt 文本默认不占高度，尤其当 .item 里只有 <img> 没其他内容时，加载失败就只剩一条空白缝，整列塌掉。这不是样式问题，是语义缺失。
补救方式很实在：
- 给
.item设最小高度：min-height: 200px（根据业务图最小预期值定）； - 加载失败时用伪元素 fallback：
<img onerror="this.classList.add('broken')">+.broken::after { content: '图片加载失败'; display: block; }； - 懒加载必须配合 IntersectionObserver + 占位图（哪怕只是
data-src+src="data:image/svg+xml,%3Csvg..."），不能裸 img 等 scroll 触发； - SSR 场景下，服务端需预渲染占位结构，否则水合后 height 从 0 → 实际值，强制 layout，用户看到明显跳帧。
aspect-ratio 没设、grid-auto-rows 漏了、min-height 忘加、懒加载没占位，任意一个断点都会让瀑布流变成瀑布泻。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
