求助：如何实现CSS Grid布局？红色列自适应高度，绿色列堆叠且两列等宽

下面是实现你需求的代码示例，完全符合红色容器自适应高度、绿色容器垂直堆叠、两部分各占1/2宽度的要求：

HTML 结构 #

<div class="grid-container">
  <div class="red-box">红色容器（自适应高度）</div>
  <div class="green-box">绿色容器1</div>
  <div class="green-box">绿色容器2</div>
</div>

CSS 样式 #

.grid-container {
  display: grid;
  /* 定义两列，每列各占可用空间的1/2 */
  grid-template-columns: 1fr 1fr;
  /* 可选：添加列间距 */
  column-gap: 1rem;
}

.red-box {
  background-color: #ff4444;
  /* 红色容器默认占据第一列，高度由内容自动撑开 */
  padding: 1rem;
}

.green-box {
  background-color: #44dd44;
  /* 所有绿色容器指定放在第二列，自动垂直堆叠 */
  grid-column: 2;
  /* 可选：添加绿色容器之间的间距 */
  margin-bottom: 1rem;
  padding: 1rem;
}

关键逻辑说明 #

• grid-template-columns: 1fr 1fr 确保两列宽度完全相等，各占容器总宽度的1/2；
• 红色容器无需额外列定位，默认填充第一列，高度由内部内容自适应；
• 所有绿色容器通过 grid-column: 2 强制放在第二列，Grid 会自动让它们在该列内垂直堆叠，高度同样由各自内容决定；
• 若需要调整容器间的间距，可通过 column-gap（列间距）和 margin-bottom（绿色容器之间的垂直间距）修改。

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