使用CSS Grid可高效实现响应式图片画廊，通过display: grid定义容器，grid-template-columns设置列数，gap控制间距，结合媒体查询实现不同屏幕下4、3、1列布局，图片用width: 100%和object-fit: cover确保自适应与一致性。
使用 CSS Grid 实现图片画廊布局简单高效，能轻松创建响应式、对齐整齐的网格结构。核心在于定义网格容器和项目，并结合媒体查询适配不同屏幕尺寸。
设置基本的 Grid 容器
将父元素设为 grid 容器，使用 grid-template-columns 控制列数，gap 设置间距。
例如，创建一个四列等宽画廊：
.gallery {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 10px;
}
实现响应式列数变化
通过媒体查询，在不同屏幕下调整列数，保证移动端体验。
示例：大屏4列，平板3列，手机1列：
.gallery {
display: grid;
gap: 10px;
}
@media (min-width: 1024px) {
.gallery { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 1023px) {
.gallery { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 600px) {
.gallery { grid-template-columns: 1fr; }
}
处理图片自适应与裁剪
确保图片在网格中表现一致，可设置统一高度或保持比例。
立即学习“前端免费学习笔记（深入）”；
常用技巧：- 图片设置 width: 100%，高度自动适应
- 使用 object-fit: cover 裁剪图片并填满区域
- 给图片容器设定固定高度，避免布局跳动
.gallery img {
width: 100%;
height: 200px;
object-fit: cover;
border-radius: 8px;
}
