用 css Grid 实现响应式画廊的核心是 grid-template-columns: repeat(auto-fit, minmax(280px, 1fr))) + gap，配合 img 的 aspect-ratio 和 Object-fit 保证图片自适应不拉伸，辅以媒体查询和 clamp 微调断点与间距。
用 CSS Grid 实现响应式画廊，核心是让列数随容器宽度自动增减，minmax() + auto-fit 是最简洁可靠的组合——它能避免媒体查询，动态填充可用空间，且天然支持等宽/等高布局。
基础结构：grid-template-columns 配合 minmax 和 auto-fit
关键写法：
gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)))); gap: 16px; }说明：
- minmax(280px, 1fr)：每列最小 280px（保证图片不被过度压缩），最大占满剩余均分空间（1fr）
- auto-fit：尽可能多地重复该列轨道，空轨道会被合并，实现“挤满即停”
- 对比
auto-fill：auto-fill 会保留空轨道（可能留白），auto-fit 更适合画廊这类内容驱动的布局
让图片自适应且不拉伸变形
Grid 只管网格线，图片本身需额外控制：
立即学习“前端免费学习笔记（深入）”；
gallery img { width: 100%; height: 200px; /* 可设固定高，或用 aspect-ratio */ object-fit: cover; /* 保持比例裁剪填充 */ border-radius: 8px; } <p>/<em> 或更现代方案（推荐）：用 aspect-ratio 维持宽高比 </em>/ gallery img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }注意：如果图片原始尺寸差异大，建议统一用 aspect-ratio + object-fit，比固定高度更健壮。
适配小屏与超大屏的微调技巧
auto-fit 已覆盖大部分断点，但可加少量增强：
- 手机窄屏下强制单列：给最小列宽设为
minmax(100%, 1fr)，但更稳妥是加媒体查询：@media (max-width: 480px) { grid-template-columns: 1fr; } - 大屏限制最大列数：用
repeat(5, minmax(280px, 1fr)))替代 auto-fit，避免过宽容器出现太多细列 - gap 响应式：用
gap: clamp(8px, 2vw, 24px)让间距随屏幕缩放
补充：解决最后一行对齐问题（可选）
默认 auto-fit 下，最后一行项目可能左对齐。如需居中，加：
gallery { justify-content: center; /* 水平居中整行 */ /* 或 */ justify-items: center; /* 每个项目自身水平居中（影响所有项） */ }若要最后一行两端对齐（类似 flex 的 space-between），Grid 本身不直接支持，此时可改用 justify-content: stretch（默认）+ 确保每列 minmax 下限合理，通常已足够自然。