悠悠楠杉
网站页面
CSS初级项目中如何实现图片画廊布局：Flex与Grid结合实践
11/25
![]()
实战：从HTML结构开始
先搭建基础HTML结构：
html
.page作为根容器，使用Flex布局控制三大区块：
css
.page {
display: flex;
flex-direction: column;
min-height: 100vh;
}
.header, .footer {
padding: 1rem;
background: #f0f0f0;
text-align: center;
}
.gallery-container {
flex: 1;
padding: 1rem;
background: #fff;
}
这里的关键是给.gallery-container设置flex: 1，让它自动填充剩余空间，避免内容少时页脚上移。
Grid驱动画廊内部布局
接下来是核心部分——图片网格。我们不固定列数，而是让Grid根据容器宽度智能调整：
css
.gallery {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 1rem;
padding: 1rem 0;
}
.gallery img {
width: 100%;
height: 200px;
object-fit: cover;
border-radius: 8px;
transition: transform 0.3s ease;
}
.gallery img:hover {
transform: scale(1.05);
}
auto-fit配合minmax(250px, 1fr)是响应式的精髓：每张图最小250px，如果剩余空间足够就扩展填充，空间不足则自动换行。gap属性统一管理间距，比传统margin更干净。
响应式增强体验
虽然上述代码已具备基本响应能力，但我们还可以进一步优化移动端体验。在小屏幕上，可以增加一些视觉反馈：
css
@media (max-width: 600px) {
.header {
font-size: 1.2em;
}
.gallery {
grid-template-columns: 1fr;
gap: 0.5rem;
}
}
当屏幕窄于600px时，强制单列显示，更适合手机竖屏浏览。同时缩小间隙，避免过多留白。
实际开发中的细节考量
在真实项目中，你可能会遇到图片尺寸不一的问题。除了用object-fit: cover裁剪外，建议后台统一处理图片尺寸，前端只负责展示。另外，大量图片加载会影响性能，可结合懒加载技术，在用户滚动到可视区域时再加载图片。
通过这个小项目可以看出，Flex与Grid并非竞争关系，而是互补工具。掌握它们的适用场景，才能写出真正专业的CSS代码。下次当你面对复杂布局时，不妨先问自己：这是更偏向一维还是二维结构？答案往往就在问题之中。
