纯 css grid 无法实现真正按高度排序的瀑布流，因 grid-template-rows: masonry 仅 chrome 116+ 支持且需同时满足显式列定义、无跨行跨列、容器有明确高度、子项无浮动/绝对定位等严苛条件，任一不满足即静默回退；safari/firefox 不解析该语法，@supports 永远返回 false；生产环境须用 grid-auto-flow: column 配合 js 动态分配最短列，或降级为 column-count。
纯 CSS Grid 无法实现真正按高度排序的瀑布流，grid-template-rows: masonry 仅 Chrome 116+ 支持且条件严苛；生产环境必须用 grid-auto-flow: column 配合 JS 动态分配，或退而求其次用 column-count 降级。
为什么 grid-template-rows: masonry 不能直接上线
它不是开关式特性：Chrome 中需同时满足——显式写死 grid-template-columns（禁用 auto-fill 或 auto-fit）、子项无跨行跨列、容器有明确 height 或 max-height、子项内不能含 float/position: absolute/contain: layout。漏一条就静默回退为单列行流。
@supports (grid-template-rows: masonry) 在 Safari 和 Firefox 中永远返回 false，因它们根本不解析该语法，无法做可靠特性检测。
grid-template-columns: repeat(auto-fill, minmax(...)) 的坑与解法
必须用 auto-fill，不用 auto-fit：
-
auto-fit会收缩空列轨道，导致初加载只出 1 列，滚动后突然跳成 3 列 -
auto-fill强制保留所有列占位，哪怕某列暂时为空，这是瀑布流对齐的基础
minmax(240px, 1fr) 在小屏下会出问题：
- iPhone 竖屏（375px）强行撑两列 → 每列只剩 ~170px，图片文字挤压变形
- 必须加
@media (max-width: 768px)把最小宽度降到160px，甚至120px - 同步缩小
gap，否则小屏间距占比过大，内容更局促
图片错位、底部多出 4px 空白的根因与硬要求
这不是 Grid 的锅，是 <img> 默认 vertical-align: baseline 导致的基线对齐问题：
- 必须加
img { display: block; width: 100%; height: auto; } - 若需裁剪，父容器（如
<figure></figure>）必须设aspect-ratio（如4/3），再配object-fit: cover - 禁用
margin-bottom: -4px修补——不同字体字号下像素值不固定，不可靠 -
gap控制间距，别在 item 上写margin，否则干扰 JS 对高度的测量（如果后续加 JS）
真要上线，JS 动态分配比纯 CSS 更可控
Grid 只管列宽、断点、间隙；JS 只做一件事：把每个元素塞进当前最短列。
- 用
item.getBoundingClientRect().height更新列高，别用offsetHeight（含边框/滚动条误差） - JS 不靠
order属性重排（易被 CSS 优先级干扰），直接用appendChild移动 DOM 节点，确保视觉顺序与渲染顺序一致 - 图片加载延迟、字体重排都会影响高度计算，每次插入后都得重新测
最易被忽略的是：Grid 只排位置，不管内容怎么缩。图片没加 display: block、没设 aspect-ratio、没控 object-fit，再准的 Grid 布局也会错乱——样式细节决定成败，不是“写了就灵”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
