使用CSS Grid实现响应式图片画廊，关键在于grid-template-columns配合minmax()和auto-fit。容器设为display: grid，使用repeat(auto-fit, minmax(200px, 1fr))让列数自适应屏幕宽度，小屏少列、大屏多列；gap和padding优化间距；img设置width: 100%、height: auto保证等比缩放不溢出；可选添加overflow: hidden和:hover缩放提升视觉效果；通过@media (max-width: 480px)设1fr单列布局适配手机。该方案无需JavaScript，仅用简洁CSS即可实现高效响应式画廊。
用 CSS Grid 实现响应式图片画廊，关键是利用网格的自动布局和断点适配能力，让图片在不同屏幕尺寸下自动调整列数和大小。核心思路是使用 grid-template-columns 配合 minmax() 和 auto-fit 或 auto-fill，再结合媒体查询微调。
基础网格结构设置
定义一个容器使用 grid 布局，让列宽根据容器大小自动伸缩：
.container {display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 10px;
padding: 10px;
}
auto-fit 会让可用列自动拉伸填满空间，minmax(200px, 1fr) 表示每列最小 200px，最大占 1 份弹性空间。这样小屏时列少，大屏时列多，自然响应。
图片自适应处理
确保每张图片在网格内不溢出并保持比例：
立即学习“前端免费学习笔记（深入）”；
img {width: 100%;
height: auto;
display: block;
}
这样图片会撑满所在网格单元格宽度，并等比缩放高度，避免布局错乱。
可选：添加悬停效果或固定高度
如果想让画廊更美观，可以设置统一高度或加交互：
.grid-item {overflow: hidden;
border-radius: 8px;
}
img:hover {
transform: scale(1.05);
transition: transform 0.3s ease;
}
配合 overflow: hidden 可实现平滑缩放，增强视觉体验。
适配移动端优化
在极小屏幕上，可以强制单列显示，提升可读性：
@media (max-width: 480px) {.container {
grid-template-columns: 1fr;
}
}
这种写法确保手机竖屏时图片垂直堆叠，操作更方便。
基本上就这些。Grid 的强大在于简洁语法实现复杂响应逻辑，不需要 JavaScript 或浮动布局。只要掌握 repeat(auto-fit, minmax()) 这个模式，大多数图片画廊都能轻松搞定。
