用 display: grid 实现响应式相册，关键在 aspect-ratio + object-fit: cover 控制图片宽高比与裁剪，配合 repeat(auto-fill, minmax(280px, 1fr))) 动态列数，放大图用 position: fixed 避免重排，预设宽高比防加载跳动。
直接用 display: grid 搭网格相册，别碰 float 或 inline-block —— 那些方案现在纯属给自己加维护成本。
怎么让图片等宽等高又不拉伸变形
常见错误是只设 width: 100%，结果竖图被压扁、横图留大片白边。关键在容器约束 + 图片裁剪逻辑：
- 给每个相册项（
.item）设固定宽高比，用aspect-ratio: 4/3（现代浏览器）或padding-top: 75%+position: relative兼容老版本 - 图片用
object-fit: cover，不是contain—— 后者保全图但留空，前者裁切居中，视觉更统一 - 避免对
<img>直接设height，否则响应式时会崩；高度由容器控制
grid-template-columns 怎么写才不踩坑
别硬写死列数如 repeat(4, 1fr)，屏幕一窄就溢出。动态列数才是正解：
- 用
repeat(auto-fill, minmax(280px, 1fr)))：最小单列 280px，能塞几列塞几列，超了自动换行 - 慎用
auto-fit和auto-fill的区别——auto-fit会合并空列，auto-fill保留空占位，相册通常选auto-fill更可控 - 如果要兼容 IE，得退到
display: flex+flex-wrap，但 grid 现在覆盖率超 98%，真没必要为 IE 写两套
点击放大图片时 grid 布局突然错乱
这是 modal 层没脱离文档流导致的典型问题。触发放大后，页面重排，grid 容器高度突变：
- 放大弹层必须用
position: fixed或position: absolute+z-index，且父容器不能有overflow: hidden - 别在 grid 子项里直接
display: none隐藏原图——这会让 grid 重新计算布局。应该用visibility: hidden+opacity: 0过渡 - 放大图建议用新
<dialog></dialog>元素，原生支持showModal()，比手写 div + backdrop 更稳
最易忽略的是图片加载顺序和懒加载冲突：用 loading="lazy" 时，grid 可能先按 placeholder 高度渲染，图片加载后再撑开，造成跳动。解决办法只有两个：预设 aspect-ratio，或者用 img 的 decoding="async" 配合 fade-in 动画遮掩重绘。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
