1. 使用Flex布局构建基础网格
1.1 规划HTML结构与标签语义
在开始搭建图片画廊前，最重要的是建立一个清晰的HTML结构，以便后续的CSS样式能稳定作用。通常采用一个容器元素 gallery，内部是若干个子项 gallery-item，每项包含一张图片，尽量使用语义标签如 figure 与 figcaption 来提升可访问性。
通过这种结构，可以确保图片画廊在不同设备上保持一致的布局，并且便于未来的维护和扩展。要点在于：外层是Flex容器，内层是独立的图片项，便于控制对齐、换行与间距。
<section class="gallery" aria-label="图片画廊"><figure class="gallery-item"><img src="img1.jpg" alt="示例图片1"><figcaption>图片1说明</figcaption></figure><!-- 更多图片项 -->
</section>1.2 容器内图片项的标记
每一个图片项均作为一个独立块存在，便于对其应用统一的尺寸、圆角、阴影等样式。每项通常包含一个图片元素，必要时加上简单的 figcaption，以增强对屏幕阅读器的支持。
通过统一的标记，可以在后续的样式中对所有项应用一致的边距、圆角与裁剪效果，从而实现整体的整齐感。
/* CSS 结构示例将放在后续章节具体展开 */2. 使用Flex布局实现整齐的列宽和行高
2.1 设置Flex容器属性
将 gallery 设置为一个 Flex容器，并开启 flex-wrap 以实现自动换行。这样的设置能让图片项在宽屏上并排显示，在窄屏上自动换行，保持整齐的网格感。
为了避免图片项彼此挤压，通常会为子项设定固定的宽度或可伸缩的宽度结合边距。flex-wrap: wrap 是实现多行布局的关键属性。若要在行间保持均等间距，可以在容器或项上使用合适的边距或 gap 属性。
/* Flex 容器：不使用 gap 的老式做法，靠 margin 来控制间距 */
.gallery {display: flex;flex-wrap: wrap;margin: -6px; /* 用于抵消子项 margin 的外边距，确保整体对齐 */
}
.gallery-item {width: calc(25% - 12px);margin: 6px; /* 控制列间距与行间距 */box-sizing: border-box;
}
.gallery-item img {width: 100%;height: auto;display: block;border-radius: 8px;
}
/* 另一种现代做法，直接使用 gap 来管理间距 */
.gallery {display: flex;flex-wrap: wrap;gap: 12px; /* 控制行间距与列间距，简单直观 */
}
.gallery-item {flex: 0 0 calc(25% - 12px);
}
.gallery-item img {width: 100%;height: auto;display: block;border-radius: 8px;
}
2.2 控制子项尺寸与间距
为了实现整齐的网格，需要对每个图片项设置固定的宽度，同时通过边距实现均匀的间距。calc() 的组合用法可以在不依赖固定像素的情况下保持列宽的一致性。
另外，设置图片项内部的图片为响应式：width: 100% 与 height: auto，可以确保图片在不同容器宽度下保持比例，避免失真。
/* 结合 calc 和 margin 的布局示例 */
.gallery-item {width: calc(25% - 12px);margin: 6px;
}
.gallery-item img {width: 100%;height: auto;display: block;
}
@media (max-width: 1000px) {.gallery-item { width: calc(33.333% - 12px); }
}
@media (max-width: 600px) {.gallery-item { width: calc(50% - 12px); }
}
3. 通过 margin 实现统一间距的细节
3.1 设定外边距尺寸与对齐方式
在不使用 gap 的场景中，利用 外边距 margin 来创建行间距和列间距，关键在于通过父容器的 负边距来抵消溢出，使整体网格边缘对齐。
同时要确保图片在容器中的对齐方式一致，推荐采用 左对齐/居中 的方式来提升视觉统一感，避免出现漂移。通过合适的字体和图像比例，能进一步增强画廊的整洁感。
/* 通过 negative margin 实现外部对齐演示 */
.gallery {display: flex;flex-wrap: wrap;margin: -6px;
}
.gallery-item {width: calc(25% - 12px);margin: 6px;
}
/* 通过分组容器实现等距感的另一种方式 */
.gallery {display: flex;flex-wrap: wrap;gap: 12px;
}
.gallery-item {flex: 0 0 calc(25% - 12px);
}
4. 响应式调整与图片品质优化
4.1 使用媒体查询实现列数自适应
为了在不同设备上保持整齐的画廊效果，需要通过媒体查询动态调整每一列的数量。典型做法是：在大屏幕时显示四列，在平板设备显示三列，在手机端显示两列，从而确保视觉连贯性与可点击性。
此外，图片裁剪与质量优化也是关注点，使用 object-fit: cover 可保持图片的中心重点，同时避免比例失衡。通过合适的 图片占位符 与加载策略，可以提升页面性能。
/* 响应式列数调整 */
@media (max-width: 1200px) {.gallery-item { width: calc(25% - 12px); }
}
@media (max-width: 900px) {.gallery-item { width: calc(33.333% - 12px); }
}
@media (max-width: 600px) {.gallery-item { width: calc(50% - 12px); }
}
.gallery-item img {width: 100%;height: 100%;object-fit: cover;
}
<figure class="gallery-item"><img src="img2.jpg" alt="示例图片2" loading="lazy"><figcaption>图片2说明