CSS Grid布局中容器自适应最高子元素及元素定位问题求助

我来帮你搞定这个布局难题！你遇到的核心问题是blue容器用了绝对定位脱离了文档流，导致灰色的grid容器计算高度时完全忽略它，同时还要兼顾red相对于green垂直居中、blue紧贴red下方的需求。咱们可以通过调整内部布局和grid的对齐方式来解决，不用依赖绝对定位：

核心思路 #

1. 把img-meta改成垂直方向的flex容器，让red和blue在正常文档流里上下堆叠，这样grid容器就能正确计算这个区域的总高度。
2. 给grid容器添加垂直居中对齐，让img-meta区域和green区域在垂直方向上居中，满足red相对于green居中的要求。
3. 移除blue的绝对定位，确保它紧跟在red下方，同时不会脱离容器范围。

修改后的完整代码 #

CSS代码 #

body { 
  display: flex; 
  justify-content: center; 
}
.main-container { 
  background-color: grey; 
  width: 1000px; 
  display: grid; 
  grid-template-areas: "img description" "share share"; 
  grid-template-columns: 271px 1fr; 
  /* 让两个grid区域垂直居中对齐 */
  align-items: center;
}
.img-meta { 
  grid-area: img; 
  width: 272px; 
  /* 改为flex垂直排列，管理red和blue */
  display: flex;
  flex-direction: column;
  /* 确保内部元素紧贴，无默认空隙 */
  gap: 0;
}
.red { 
  width: 272px; 
  height: 380px; 
  background-color: red; 
}
.green { 
  background-color: green; 
  height: 150px; 
  /* 保留align-self:center不影响，grid的align-items已经控制了整体对齐 */
  align-self: center; 
}
.blue { 
  background-color: blue; 
  /* 移除绝对定位 */
  padding-top: 10px; 
  height: 100px; 
  width: 272px; 
  /* 确保和red无缝衔接 */
  margin-top: 0;
}

HTML代码（无需修改） #

<div class="main-container">
  <div class="img-meta">
    <div class="red"></div>
    <div class="blue"></div>
  </div>
  <div class="green"></div>
</div>

为什么这个方案可行？ #

• 用flex管理img-meta内部，red和blue都在文档流中，grid容器会自动把它们的总高度纳入计算，再也不会出现blue超出灰色容器的情况。
• main-container的align-items: center让img-meta和green在垂直方向居中，完美实现了red相对于green居中的需求。
• 移除绝对定位后，blue自然紧跟red下方，不会出现空隙，也不用额外调整间距。

如果你之前尝试把blue移出img-meta导致空隙，是因为grid的行间距或者默认margin的问题，现在用flex内部管理就彻底解决了这个问题。

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