使用Flexbox、Grid和多列布局可实现图片画廊。1. Flexbox通过flex-wrap和百分比宽度实现响应式排列；2. Grid利用grid-template-columns自动适配列数，更简洁；3. 瀑布流用column-count创建不等高多列，适合异形图。推荐优先使用Flexbox或Grid。
用 CSS 实现图片画廊排列，关键在于合理使用布局方式，让图片整齐、响应式地展示。下面介绍几种常见且实用的方法。
1. 使用 Flexbox 布局实现响应式画廊
Flexbox 是最常用的方式之一，适合创建灵活的图片行或列排列。
基本思路：将容器设为 display: flex，并控制换行和对齐方式。
- 设置容器 flex-wrap: wrap 允许换行
- 每张图片用百分比宽度（如 30%）控制每行显示数量
- 添加 margin 实现间距
示例代码：
立即学习“前端免费学习笔记（深入）”；
.gallery-flex {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.gallery-flex img {
width: 30%;
height: auto;
}
2. 使用 CSS Grid 创建等距网格画廊
Grid 更适合创建二维布局，能轻松实现每行固定列数。
情感家园企业站5.0 多语言多风格版
下载
一套面向小企业用户的企业网站程序！功能简单，操作简单。实现了小企业网站的很多实用的功能，如文章新闻模块、图片展示、产品列表以及小型的下载功能，还同时增加了邮件订阅等相应模块。公告，友情链接等这些通用功能本程序也同样都集成了！同时本程序引入了模块功能，只要在系统默认模板上创建模块，可以在任何一个语言环境（或任意风格）的适当位置进行使用！
- 使用 display: grid
- 通过 grid-template-columns 定义列宽
- 用 gap 控制图片间距
优势：自动适配屏幕，无需写多个媒体查询。
示例代码：
立即学习“前端免费学习笔记（深入）”；
.gallery-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 15px;
}
3. 瀑布流画廊（多列不等高）
如果想实现 Pinterest 风格的瀑布流，可用 column-count 和 break-inside。
- 容器启用多列布局
- 图片设置避免分页断开
- 适合内容高度不一的场景
注意：此方法简单但对图片顺序控制较弱。
基本上就这些，选择哪种方式取决于你的设计需求。Flexbox 和 Grid 更现代、可控性强，推荐优先使用。
