自适应网格布局需用grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)))配合grid-auto-flow: dense和aspect-ratio占位，避免固定列数、DOM顺序错乱及图片加载错位。
用 grid-template-columns: repeat(auto-fit, minmax(...)) 控制列数自适应
列数随容器宽度自动增减，不是靠媒体查询硬切，而是让 Grid 自己算：最小宽度达标就加一列，不够就收窄或减少列数。关键在 auto-fit —— 它会收缩未填充的列，auto-fill 则保留空列占位，响应式场景下必须选 auto-fit。
常见错误是写成 repeat(3, 1fr) 或固定 column-count: 3，那根本不是自适应，只是静态三列。
-
minmax(280px, 1fr)表示每列至少 280px，剩余空间均分；小屏下自动退为 1 列 - 容器不能设
width: fit-content或display: inline-grid，否则列数计算失效 - Firefox 对
auto-fit在高度差异大的 item 下偶有渲染延迟，可加grid-auto-rows: 1px触发稳定行生成
为什么 grid-auto-flow: dense 是按列填满的关键
没有它，Grid 默认按“行优先”顺序排列：第 1 行填满，再排第 2 行……结果高 item 后面留下大片纵向空白，完全不像瀑布。加上 dense 后，系统允许短 item 回填前面长 item 留下的空隙，视觉上才真正“按列优先落下”。
但注意：dense 会打乱 DOM 顺序渲染（比如 DOM 中第 5 个 item 可能出现在第 1 列底部），对 SEO 和屏幕阅读器无影响——因为 Grid 不改变 DOM 顺序，只改变视觉流。
立即学习“前端免费学习笔记（深入）”；
- 必须配合
grid-auto-rows使用，哪怕设成10px，否则跨行计算可能失准 - 若某 item 显式写了
grid-row: span 3，dense仍会尊重该声明，不会强行塞进空隙 - 不要和
grid-row-end: span X混用——后者需预知高度，而自适应场景下 item 高度不可控
图片加载导致列错位？提前占位比等 JS 更可靠
DOM 渲染时图片还没加载，高度为 0，Grid 按 0 分配空间，加载后突然撑开，下方所有格子跳变、错列。这不是布局逻辑问题，是占位缺失。
现代方案首选 aspect-ratio：直接写在 <img> 上，浏览器原生支持，不依赖 JS，也不需要 wrapper。
-
<img src="..." alt="" width="800" height="600">→ Chrome/Firefox 自动推导aspect-ratio: 4/3 -
img { aspect-ratio: 4/3; object-fit: cover; }→ Safari 15.4+ 全覆盖 - 旧 Safari fallback：用
padding-top: 75%+position: relative+ 绝对定位img，但必须包裹一层<div class="img-wrapper"> - 禁用
img { height: auto }类全局样式，防止父容器高度被压缩归零
Firefox 下 gap 错位或消失？换写法绕过渲染 bug
Firefox 对 grid-gap（尤其是旧写法）在 grid-auto-flow: dense 场景下存在历史 bug：间隙可能漏掉、错位，或被相邻 item 的 margin 折叠干扰。
解决方案很明确：统一用 gap（新标准属性），并用 margin-bottom 补偿最后一行多余间隙。
- 写
gap: 1rem，别写grid-gap: 1rem或grid-column-gap - 给每个 item 加
margin-bottom: 1rem，再用.item:last-child { margin-bottom: 0 }去掉末尾冗余 - 避免在 item 上同时设
margin和gap，尤其不要设margin-top—— 它会和 gap 叠加，导致首行间距翻倍 - 如果用了 Masonry.js，它的绝对定位会绕过 gap，此时必须用 CSS
margin控制间距
aspect-ratio 必须按实际比例写死——写成 1/1 而实际是 4/3，照样塌陷。不是“写了就行”，而是“写对才生效”。 
