用 grid-template-columns: repeat(auto-fit, minmax(280px, 1fr))) 实现响应式图片墙，配合 aspect-ratio 锁定宽高比、grid-auto-rows 预留高度防抖动，并为旧浏览器降级为 inline-block + 媒体查询。
图片阵列墙在小屏上挤成一团？用 grid-template-columns 配 minmax() + auto-fit
响应式图片墙最常踩的坑，是写死列数或用 flex-wrap 硬撑——结果小屏下图片被压缩变形，或者留出大片空白。Grid 的自动列生成才是正解。
核心思路：让浏览器根据容器宽度和单图最小宽度，动态算出能放几列，而不是人为指定 grid-template-columns: repeat(4, 1fr) 这种固定写法。
-
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)))是黄金组合：每列至少 280px（适配手机横屏/小平板），最多均分剩余空间 - 别用
auto-fill——它会渲染所有“可能”的列（包括空列），影响语义和焦点顺序 - 配合
gap控制间距，别用margin，否则在auto-fit下容易错位
图片宽高比不一致，导致网格塌陷？用 aspect-ratio 锁定比例
原始图片尺寸五花八门，Grid 默认按内容高度撑开，一列里有张高图，整行就变高，其他图下面全留白——这不是响应式，是混乱式。
现代方案直接用 aspect-ratio，无需 JS 或伪元素 hack：
立即学习“前端免费学习笔记（深入）”；
- 给图片容器（如
<figure></figure>或<div class="card">）设 <code>aspect-ratio: 4 / 3，再加overflow: hidden - 图片本身设
width: 100%; height: 100%; object-fit: cover，确保填满且不拉伸 - 注意兼容性：
aspect-ratio在 Safari 15.4+、Chrome 88+、Firefox 89+ 支持；老版本需回退到padding-top百分比 hack（但只适用于静态宽高比） - 基础布局用
display: inline-block或float: left，配合box-sizing: border-box - 用媒体查询分段控制列宽：
@media (max-width: 480px) { width: 100%; }、@media (min-width: 481px) and (max-width: 768px) { width: 50%; }……逐级写 - 务必加
font-size: 0在父容器上，消除inline-block间隙；子元素再设正常font-size - 性能提醒：这种写法在 100+ 图片时，重排压力明显大于 Grid，慎用于长列表
- 给 Grid 容器加
grid-auto-rows: 200px（值略大于你设定的aspect-ratio对应高度），让每行初始就有高度 - 搭配
img { display: block; width: 100%; height: 100%; }，确保图片撑满预留空间 - 如果高度差异大（比如混用 4:3 和 16:9 图），可改用
grid-auto-rows: minmax(200px, auto)，兼顾预留与弹性
IE11 或旧安卓 WebView 必须支持？放弃 Grid 自动列，改用 display: inline-block + 媒体查询
别试图给 IE11 加 Grid polyfill——auto-fit 和 minmax() 完全不支持，JS 模拟又重又慢。真要兼容，就得降级。
图片加载慢拖垮布局？用 grid-auto-rows 预留高度防抖动
没设高度的图片加载前是 0 高，Grid 行高塌缩，图片一进来就“啪”一下往下跳——用户体验差，还可能触发重复渲染。
真正难的不是写出 Grid 代码，而是想清楚：最小列宽取多少才不切头切脚，aspect-ratio 回退逻辑要不要加，以及是否值得为 2% 的旧设备用户放弃自动布局的维护优势。这些权衡点，调试时多看三眼 viewport 切换，比背十个属性有用。
