css制作图片画廊网格布局

使用 css Grid 可高效创建响应式图片画廊，核心代码为display: grid 与 grid-template-columns: repeat(auto-fit, minmax(200px, 1fr))，配合 gap、Object-fit 和悬停缩放提升视觉效果，支持 移动端适配 及扩展功能。

使用 CSS 制作图片画廊网格布局，核心是利用 Grid 或 Flexbox 布局实现整齐、响应式的 排列。下面介绍一种简洁高效的 CSS Grid 方案，适合大多数图片画廊需求。

使用 CSS Grid 创建图片画廊

grid 布局 非常适合二维网格结构，只需少量代码即可实现自适应的图片网格。

.gallery {display: grid;   grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));   gap: 10px;   padding: 10px; } <p>.gallery img {width: 100%; height: 200px; object-fit: cover; border-radius: 8px; transition: transform 0.2s; }</p><p>.gallery img:hover {transform: scale(1.05); }</p>

html结构示例：

立即学习 “ 前端免费学习笔记（深入）”；

吉卜力风格图片在线生成

将图片转换为吉卜力艺术风格的作品

86

查看详情

<div class="gallery">   <img src="image1.jpg" alt=" 风景 1 ">   <img src="image2.jpg" alt=" 风景 2 ">   <img src="image3.jpg" alt=" 风景 3 ">   <img src="image4.jpg" alt=" 风景 4 ">   <!-- 更多图片 --> </div>

关键属性说明

• grid-template-columns: repeat(auto-fit, minmax(200px, 1fr))：自动适配容器宽度，每项最小 200px，最大 1fr（均分剩余空间）
• gap: 10px：设置网格项之间的间距
• object-fit: cover：保持图片比例并填满设定区域，避免变形
• transition 和 hover 效果：提升用户体验，增加交互感

适配移动端建议

该布局天然响应式，但在极小屏幕上可微调最小宽度：

@media (max-width: 480px) {.gallery {     grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));     gap: 8px;   } }

可选增强功能

• 添加 box-shadow 提升卡片层次感
• 使用 aspect-ratio 统一图片高宽比（现代 浏览器 支持）
• 配合 javaScript 实现灯箱效果或 懒加载

基本上就这些。用 CSS Grid 实现图片画廊简单、灵活，兼容性良好，适合快速搭建美观的响应式图集。

以上就是