使用CSS Grid可轻松创建响应式图片画廊。首先构建包含图片的HTML容器，接着用display: grid设置三列等宽布局并添加间距，通过媒体查询在小屏幕上改为两列或单列，也可使用repeat(auto-fit, minmax(200px, 1fr))实现自适应列数，配合悬停缩放效果提升交互体验。
想要创建一个简洁美观的图片画廊，CSS网格布局（Grid Layout）是一个强大且灵活的选择。它能让你轻松控制图片的排列方式、间距和响应式行为，无需依赖复杂的JavaScript或第三方库。下面通过一个实战示例，带你一步步实现一个响应式的简易图片画廊。
先构建一个简单的HTML结构，包含一个容器和若干图片项：
<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"> <img src="image5.jpg" alt="风景5"> <img src="image6.jpg" alt="风景6"> </div>
接下来用CSS定义网格容器，并设置列数、行高和间距：
.gallery {
display: grid;
grid-template-columns: repeat(3, 1fr); /* 三列等宽 */
gap: 10px; /* 图片之间的间距 */
padding: 10px;
}
<p>.gallery img {
width: 100%;
height: auto;
border-radius: 8px;
transition: transform 0.3s ease;
}</p><p>.gallery img:hover {
transform: scale(1.05);
}</p>这里grid-template-columns: repeat(3, 1fr)表示创建三列，每列平均分配容器空间。gap属性统一设置行列间距，让布局更整洁。
立即学习“前端免费学习笔记（深入）”；
为了让画廊在不同设备上都能良好显示，加入媒体查询动态调整列数：
@media (max-width: 768px) {
.gallery {
grid-template-columns: repeat(2, 1fr); /* 平板：两列 */
}
}
<p>@media (max-width: 480px) {
.gallery {
grid-template-columns: 1fr; /<em> 手机：单列 </em>/
}
}</p>随着屏幕变小，图片自动从三列变为两列再到单列堆叠，保证可读性和美观性。
如果你希望列数根据容器自动调整，可以使用repeat(auto-fit, minmax())语法：
.gallery {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 10px;
padding: 10px;
}
这段代码的意思是：每列最小200px，最大为1fr，浏览器会自动计算最多能放几列。这种方式更加灵活，适合内容宽度不固定的情况。
基本上就这些。通过简单的HTML和CSS，你就能实现一个现代、响应式的图片画廊。关键是理解grid的结构控制能力和响应式设计思路。实际项目中可以根据需求添加阴影、标题、懒加载等增强功能。
以上就是如何使用CSS实现简易的图片画廊_CSS网格布局实战演练的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
广告Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
923
收藏
