CSS Grid图片画廊小屏幕下图片标题消失问题的解决方法

嘿，我来帮你搞定这个响应式画廊的标题问题！从你的描述来看，大概率是标题脱离了文档流或者小屏幕下Grid列数太密，网格项空间不够导致的。下面给你一步步的解决方案：

先排查常见问题根源 #

如果你的标题用了position: absolute，那它会脱离文档流，Grid不会为它预留空间——小屏幕下图片高度占满网格项后，标题就会被遮住或者跑到外面去。另外，固定的4列布局在小屏幕下每个网格项宽度太窄，也容易挤压标题。

修正后的完整代码示例 #

首先调整HTML结构，把每张图片和标题放在单独的容器里（让Grid的每个网格项包含完整的内容）：

<div class="container">
  <div class="gallery-item">
    <img src="your-image-1.jpg" alt="图片标题1" class="gallery-image">
    <p class="image-caption">这是第一张图片的标题</p>
  </div>
  <div class="gallery-item">
    <img src="your-image-2.jpg" alt="图片标题2" class="gallery-image">
    <p class="image-caption">这是第二张图片的标题</p>
  </div>
  <!-- 更多画廊项 -->
</div>

然后修改CSS，确保标题始终在图片下方，同时让Grid完全响应：

.container {
  display: grid;
  /* 自动适配屏幕宽度：每列最小250px，超出部分自动均分列数 */
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  grid-gap: 15px; /* 增大间距，避免小屏幕下内容拥挤 */
  padding: 10px;
}

.gallery-item {
  /* 用flex垂直排列图片和标题，确保标题不会乱跑 */
  display: flex;
  flex-direction: column;
  gap: 8px; /* 图片和标题之间的间距 */
}

.gallery-image {
  width: 100%;
  height: 220px; /* 给图片设置固定高度，避免拉伸变形 */
  object-fit: cover; /* 保持图片比例，裁剪多余部分，不拉伸 */
}

.image-caption {
  margin: 0;
  text-align: center;
  padding: 0 4px;
  font-size: 0.9rem; /* 小屏幕下可以适当缩小字体 */
}

/* 针对极小屏幕（比如手机竖屏）的额外优化 */
@media (max-width: 480px) {
  .container {
    grid-template-columns: 1fr; /* 强制单列显示，给内容足够空间 */
  }
  .gallery-image {
    height: 190px; /* 稍微减小图片高度，给标题留出更多空间 */
  }
}

关键优化点解释 #

1. 响应式Grid列：用repeat(auto-fit, minmax(250px, 1fr))替代固定的4列，让Grid根据屏幕宽度自动调整列数，小屏幕下自然减少列数，避免拥挤。
2. Flex子容器：每个gallery-item用flex垂直排列，确保标题始终在图片下方，Grid会自动计算每个网格项的高度（包含图片+标题）。
3. 图片尺寸控制：object-fit: cover保证图片不变形，固定高度避免图片拉伸挤压标题空间。
4. 小屏幕适配：媒体查询强制单列，同时微调图片高度和字体大小，进一步优化显示效果。

如果之前你用了绝对定位的标题，记得把position: absolute相关的样式删掉，让标题回到文档流里，这样Grid就会为它预留空间啦！

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