如何通过css grid实现图片画廊布局

使用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;
}

实现响应式列数变化

通过媒体查询，在不同屏幕下调整列数，保证移动端体验。

AI卡通生成器

免费在线AI卡通图片生成器 | 一键将图片或文本转换成精美卡通形象

51

查看详情

.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;
}

以上就是如何通过css grid实现图片画廊布局的详细内容，更多请关注php中文网其它相关文章！