求助：如何实现图片与标题联动的响应式网格布局？

问题背景 #

需要实现一个响应式的图片+标题网格：

• 小屏设备：每个图片与其标题垂直排列，单独占一行
• 大屏设备：图片横向排列成3列，对应标题在图片下方，形成规整网格

之前用table实现时，大屏显示正常，但移动端标题会全部堆积在所有图片下方，达不到预期效果。

最优方案：放弃Table，改用CSS Grid/Flexbox #

Table是为表格数据设计的，用来做这种布局不仅语义化差，还容易出现布局异常。推荐用CSS Grid或Flexbox，代码更简洁，响应式控制更灵活。

方案1：CSS Grid实现（推荐，现代浏览器支持） #

调整后的HTML结构

把每个图片+标题封装成独立容器，语义化更清晰：

<div class="image-grid">
  <div class="grid-item">
    <img src="img1" alt="Image 1">
    <span class="text-caption">Caption 1</span>
  </div>
  <div class="grid-item">
    <img src="img2" alt="Image 2">
    <span class="text-caption">Caption 2</span>
  </div>
  <div class="grid-item">
    <img src="img3" alt="Image 3">
    <span class="text-caption">Caption 3</span>
  </div>
  <!-- 可继续添加更多图片项 -->
</div>

对应的CSS代码

/* 基础网格布局 */
.image-grid {
  display: grid;
  /* 大屏下每行3个等宽列 */
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem; /* 图片组之间的间距，可按需调整 */
  padding: 1rem;
}

/* 单个图片项的垂直布局 */
.grid-item {
  display: flex;
  flex-direction: column;
  align-items: center; /* 图片和标题居中显示 */
}

.grid-item img {
  max-width: 100%;
  height: auto;
}

.text-caption {
  font-style: italic;
  font-size: inherit;
  margin-top: 0.5rem;
}

/* 小屏适配 */
@media only screen and (max-width: 800px) {
  .image-grid {
    grid-template-columns: 1fr; /* 小屏下每行1个 */
  }
}

方案2：Flexbox实现（兼容旧浏览器） #

如果需要兼容不支持CSS Grid的旧浏览器，用Flexbox也能实现同样效果：

CSS代码

.image-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  padding: 1rem;
}

.grid-item {
  /* 大屏下占1/3宽度，减去间距 */
  flex: 1 1 calc(33.333% - 1rem);
  display: flex;
  flex-direction: column;
  align-items: center;
}

.grid-item img {
  max-width: 100%;
  height: auto;
}

.text-caption {
  font-style: italic;
  font-size: inherit;
  margin-top: 0.5rem;
}

/* 小屏适配 */
@media only screen and (max-width: 800px) {
  .grid-item {
    flex: 1 1 100%; /* 小屏下占满宽度 */
  }
}

内容的提问来源于stack exchange，提问作者everythingtrains