17370845950

使用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 更适合创建二维布局，能轻松实现每行固定列数。

• 使用 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 更现代、可控性强，推荐优先使用。