最稳的图片网格写法是display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)));，配合img {width: 100%; height: auto}和loading="lazy"及现代格式。
用 grid-template-columns 配合 minmax() 和 auto-fit 是最稳的写法
手动写多套 @media 查询来切列数，维护成本高、易漏断点、缩放时列数跳变生硬。CSS Grid 的响应式能力足够直接撑起图片网格，核心就两行：
display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) );
其中 280px 是单列最小宽度（适配手机），1fr 让剩余空间均分。浏览器会自动计算能塞几列，比手写 repeat(4, 1fr) + 媒体查询靠谱得多。
-
auto-fit会合并空轨道，auto-fill则保留空位——网格里填图片，必须用auto-fit - 别把
minmax()下限设太小（比如150px），否则小屏上图片被压扁，实际显示宽高比失控 - 如果父容器加了
padding或gap，记得用box-sizing: border-box，否则minmax计算会偏大
图片本身不自适应？img 必须加 width: 100% 和 height: auto
Grid 只管布局，不管图片渲染。常见现象是：网格列数对了，但图片溢出、拉伸、或留白巨大。根本原因是 img 默认是内联元素，有基线间隙，且不响应容器宽高。
- 给图片加
width: 100%+height: auto，强制等比缩放；缺height: auto会导致高度塌陷 - 如果图片需要居中裁剪（比如头像网格），改用
object-fit: cover+ 固定容器高，但得额外设aspect-ratio或 padding-bottom 技巧保比例 - 别依赖
max-width: 100%单独使用——它只防溢出，不触发拉伸，网格变窄时图片可能还是原尺寸
IE11 不支持 auto-fit？降级方案不是补 JS，而是换 flex + calc()
真要兼容 IE11，硬上 Grid 会失效，但也不必整个重写逻辑。Flex 布局配合媒体查询仍可达成类似效果，关键是避免 JS 计算列数。
立即学习“前端免费学习笔记（深入）”；
- 用
flex-wrap: wrap，每张图设flex: 0 0 calc(33.333% - 12px)（对应三列，减去 gap） - 不同断点用
@media切calc()的百分比值：手机calc(100% - 0)，平板calc(50% - 8px)，桌面calc(33.333% - 12px) - 注意 IE11 对
calc()里空格敏感，必须写成calc(33.333% - 12px)，不能写calc(33.333% - 12 px) - 这个方案性能好、无 JS 依赖，但列数切换不如 Grid 流畅——这是兼容代价，接受就好
加载慢、首屏卡顿？优先用 loading="lazy" 和现代格式
图片网格一多，HTTP 请求和解码压力立刻上来。光调布局没用，加载策略不跟上，用户看到的还是白块或模糊图。
- 所有
img标签加上loading="lazy"，让浏览器原生控制懒加载，比 IntersectionObserver 更轻量 - 用
<picture></picture>提供webp或avif：老浏览器回退到jpg，新浏览器省带宽、提解码速度 - 别在 CSS 里用
background-image实现响应式网格——无法用loading="lazy"，也无法被srcset控制分辨率 - 如果后端支持，给
srcset配多档宽高（如320w,768w,1200w），让浏览器选最合适的资源
列数逻辑再漂亮，图片没加载出来也是白搭。实际项目里，加载策略和布局代码得同步上线，少一个都算半成品。
