真正响应式图片墙应使用grid-template-columns: repeat(auto-fit, minmax(250px, 1fr))，确保小屏自动减列、大屏增列，配合object-fit: cover和容器高宽比控制，避免溢出或空白。
直接用 display: grid 就能做出响应式图片墙，不需要 JavaScript、不用媒体查询也能适配多数屏幕，但关键在 grid-template-columns 的写法和图片尺寸控制——写错一行，小屏就溢出或留大片空白。
grid-template-columns 怎么写才真正响应式
很多人抄 repeat(3, 1fr)，结果在手机上强行挤三列，图片被压扁或换行错乱。真正靠谱的是用 repeat(auto-fit, minmax(250px, 1fr))：
-
minmax(250px, 1fr)表示每列最小 250px（保证图片可读），最大占满剩余空间 -
auto-fit会让空列自动收缩消失，只保留有内容的列，比auto-fill更省空间 - 小于 250px 时，列数自动减少；宽度足够时，列数自然增加，无需手动写断点
图片高度不一致怎么办
原始图片宽高比不同，直接设 height: 200px 会导致拉伸或留白。正确做法是用容器约束 + object-fit：
- 给
img设width: 100%; height: 100%; object-fit: cover; - 父容器（即每个
.grid-item）必须有明确高度，比如用aspect-ratio: 4/3或padding-top: 75%配合position: relative - 避免只设
height: auto，否则网格行高会随图片内容浮动，破坏对齐
hover 放大和懒加载怎么加不翻车
加交互容易引发布局抖动或性能问题：
-
transform: scale(1.05)要配合will-change: transform或只作用于已定位元素，否则滚动时卡顿 - 懒加载必须加
loading="lazy"到每个<img>，但注意 Safari 旧版本不支持，可 fallback 用IntersectionObserver - 别在
:hover里改width或height，会触发重排；只用transform和opacity
最常被忽略的一点：语义化。用 <figure></figure> 包裹 <img> 和 <figcaption></figcaption> 不只是“好看”，它让屏幕阅读器能正确识别图片与说明的关系，而且现代 CSS Grid 对 <figure></figure> 的默认 display 处理更稳定，比裸 <img> 少一堆 inline 元素兼容性问题。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
