使用CSS Grid可高效实现响应式图片画廊，通过display: grid、grid-template-columns和gap属性定义布局结构。首先设置容器为网格布局，如三列等宽并添加间距；再利用minmax()与auto-fit实现自适应列数，确保不同屏幕下自动调整；为解决图片尺寸差异，可统一设置高度并使用object-fit裁剪；推荐用div包裹img以更好控制样式；最后添加悬停放大与阴影效果提升交互体验。整个方案无需JavaScript，兼容现代浏览器，布局灵活简洁。
使用 CSS Grid 实现图片画廊网格布局简单高效，能轻松创建响应式、等间距的图片排列。核心思路是利用 display: grid 搭配 grid-template-columns 和 gap 属性来控制布局结构。
基本网格结构设置
给图片容器设置 grid 布局，并定义列数和间距：
.gallery {
display: grid;
grid-template-columns: repeat(3, 1fr); /* 三列等宽 */
gap: 10px; /* 图片之间的间距 */
}
.gallery img {
width: 100%;
height: auto;
object-fit: cover;
}
这样会创建一个三列的图片网格，每张图自动填满所在网格单元的宽度。
响应式自适应列数
为了让画廊在不同屏幕尺寸下自动调整列数，可以用 minmax() 配合 auto-fit：
立即学习“前端免费学习笔记（深入）”；
.gallery {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 12px;
}
这表示：每列最小 200px，最大为 1fr，浏览器会根据容器宽度自动换行并填充列数。小屏幕下自动变成单列或双列，大屏则显示更多列。
处理图片高度不一致
如果图片原始尺寸差异大，可为网格项设置固定高度或使用 object-fit 统一裁剪：
.gallery img {
height: 180px;
object-fit: cover; /* 裁剪图片以填满区域 */
}
也可给每个 外层包裹一个 div 容器，设置其为网格项，更便于控制对齐和溢出。
添加悬停效果与边框
增强视觉体验，可以加入简单交互样式：
.gallery img {
transition: transform 0.3s ease;
border-radius: 4px;
}
.gallery img:hover {
transform: scale(1.05);
box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}
这样用户悬停时图片会有轻微放大和阴影，提升画廊的互动感。
基本上就这些。用 CSS Grid 做图片画廊灵活又简洁，配合现代浏览器支持，几乎不需要额外 JS 就能实现专业级布局。关键在于合理设置列宽和间距，再统一图片显示方式即可。
