CSS网格行间距与Flex元素间距过大问题求助

针对你遇到的两个布局问题，直接给你调整后的代码和关键说明：

核心问题根源 #

1. 网格行间距过大：#gallery作为grid容器，被flex容器拉伸获得额外高度后，grid默认的align-content: stretch会把空白空间分配给行间距，导致行gap被放大；
2. 文本与网格间距过大：main是高100%的flex容器，默认的align-content: stretch会让多行flex项之间撑开不必要的空白。

修改后的完整代码 #

main {
  display: flex;
  text-align: center;
  height: 100%;
  flex-wrap: wrap;
  flex: 1;
  overflow-y: auto;
  padding: 0 5px;
  margin: 0;
  /* 关键：让flex行顶部对齐，避免撑开额外间距 */
  align-content: flex-start;
  /* 让每个flex项本身不被强制拉伸 */
  align-items: flex-start;
}

#gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(50rem, 1fr));
  column-gap: 10px;
  row-gap: 10px;
  margin: 0 30px;
  /* 关键：让grid内容顶部对齐，行间距只保留设置的10px */
  align-content: flex-start;
  align-items: stretch;
  /* 确保网格占满可用宽度 */
  width: 100%;
}

.image {
  display: block;
  width: 100%;
  object-fit: cover;
  margin: 0;
  /* 不需要设置height:100%，保持图片原有比例 */
}

.description {
  font-size: 1.8rem;
  padding-top: 0;
  /* 手动控制和下方网格的间距，按需调整数值 */
  margin-bottom: 15px;
  /* 确保文本块单独占一行，避免和网格挤在同一行 */
  width: 100%;
}

<main>
  <p class="description"> text</p>
  <div id="gallery">
    <a href="01.jpg"><img class="image"  src="https://placekitten.com/408/287" alt=""></a>
    <a href="01.jpg"><img class="image"  src="https://placekitten.com/408/287" alt=""></a>
    <a href="01.jpg"><img class="image"  src="https://placekitten.com/408/287" alt=""></a>
    <a href="01.jpg"><img class="image"  src="https://placekitten.com/408/287" alt=""></a>
  </div>
</main>

关键调整说明 #

• main的两个对齐属性修改：彻底避免flex容器把多余高度分配给行和子元素，直接消除文本与网格之间的超大空白；
• #gallery的align-content: flex-start：让网格行间距固定为你设置的10px，不会随容器高度放大；
• .description的width:100%和margin-bottom：确保文本独占一行，同时手动控制和网格的间距，灵活度更高；
• 保留object-fit: cover且不设图片高度：既保证图片填满容器，又不会拉伸变形，只会裁剪多余部分。

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