用 CSS Grid 实现图片画廊最省事，只需容器设 display: grid 和 grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)))，配 object-fit: cover 统一图片尺寸，原生 <dialog> 实现点击放大，响应式优先真机测试再调 minmax 下限。
图片画廊用 display: grid 最省事
初学者常从 float 或 inline-block 入手，结果卡在间隙、换行、宽高不一致上。直接用 grid 能绕过 80% 布局坑，兼容性也够——现代浏览器（Chrome 57+、Firefox 52+、Safari 10.1+）都支持，连 Edge 16 也没问题。
关键不是“学会 grid”，而是抓住两个必需声明：
-
display: grid必须加在容器上（比如.gallery） -
grid-template-columns决定每行几列，别写死像素，用repeat(auto-fill, minmax(250px, 1fr)))让它自适应
.gallery {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)));
gap: 12px;
}
图片尺寸失控？用 object-fit: cover 强制统一
用户上传的图宽高比千奇百怪，width: 100% + height: 200px 会拉伸变形；只设 width: 100% 又导致高度不齐。真正该做的是让图片“居中裁剪”：
- 给
<img>加width: 100%和height: 200px（或用aspect-ratio: 4/3） - 必须加
object-fit: cover，否则默认是fill（拉伸） - 别忘了
object-position: center，确保裁剪时居中取图
.gallery img {
width: 100%;
height: 200px;
object-fit: cover;
object-position: center;
}
点击放大？原生 <dialog> 比 JS 插件更轻量
很多教程一上来就教用 Lightbox 类库，但纯 CSS + 原生 HTML 就能搞定基础弹窗，不用加载 JS、不操心事件绑定。
立即学习“前端免费学习笔记（深入）”；
- 用
<dialog>标签包住大图，配合showModal()方法触发（一行 JS 就够） - 点击缩略图时，把它的
src赋给弹窗里的<img>，再调用showModal() - 弹窗内加一个
<button onclick="this.closest('dialog').close()">×实现关闭 - 注意：Safari 15.4+ 才完全支持
<dialog>，旧版 Safari 需降级为display: none/block
<dialog class="modal">
<img src="" alt="放大图">
<button onclick="this.closest('dialog').close()">×</button>
</dialog>
响应式断点别乱加，先测手机再补平板
新手常一上来就写 @media (max-width: 768px) 和 @media (max-width: 480px)，结果发现手机上看还是挤。真实优先级是：
- 先在真机或 Chrome DevTools 的 “Device Toolbar” 里切到 iPhone SE（375px 宽），看 grid 是否自动缩成 1 列
- 如果没缩，说明
minmax(250px, 1fr)的下限太高，改成minmax(180px, 1fr) - 平板（768px）通常不用额外断点——
grid自己会按容器宽度重排，除非你刻意限制最大列数 - 避免用
max-width做断点，改用min-width更符合渐进增强逻辑
复杂点往往不在代码多寡，而在是否真去手机上点开看了三张不同比例的图——有两张黑边、一张被裁掉半张脸，那 object-position 就得调，而不是换框架。
