CSS Grid：嵌套网格行高自适应内容，匹配左侧行高

我来帮你搞定这个等高布局的问题！要让右侧子网格和左侧保持完全等高，同时让内部的.right元素自动均分剩余空间，咱们可以从父网格的等高控制和右侧子网格的空间分配两方面入手，直接上可运行的方案：

HTML结构 #

<div class="grid-2">
  <!-- 左侧子网格 -->
  <div class="grid-left">
    <div>左侧内容行1</div>
    <div>左侧多行内容<br>这里是第二行<br>用来撑高左侧子网格</div>
    <div>左侧内容行3</div>
  </div>

  <!-- 右侧子网格 -->
  <div class="grid-3">
    <div>右侧标题行（自适应高度）</div>
    <div class="right">均分空间项1</div>
    <div class="right">均分空间项2</div>
    <div class="right">均分空间项3</div>
  </div>
</div>

CSS样式 #

/* 全局边框方便看布局 */
div { border: 1px dotted black; }

/* 父网格：两列平分宽度，自动让子项等高 */
.grid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 15px; /* 可选：子网格之间的间距 */
  /* 关键：align-items默认值是stretch，会强制两个子网格高度完全一致 */
}

/* 左侧子网格：完全自适应内容高度 */
.grid-left {
  display: grid;
  grid-auto-rows: auto;
  gap: 8px;
}

/* 右侧子网格：内容行自适应，剩余空间由.right均分 */
.grid-3 {
  display: grid;
  /* 第一行自适应内容高度，后续所有行均分剩余空间 */
  grid-template-rows: auto repeat(auto-fit, 1fr);
  gap: 8px;
}

/* 如果.right数量是固定的，也可以直接写死行数，更直观：
.grid-3 {
  grid-template-rows: auto 1fr 1fr 1fr;
}
*/

1. 父网格的等高保障
   网格容器的align-items默认值是stretch，这会让所有网格子项（也就是左右两个子网格）自动拉伸到和容器行高一致——而容器的行高会由最高的那个子项（也就是左侧子网格）决定，所以右侧子网格会自动跟左侧等高，完全不用手动设置高度。

2. 右侧子网格的空间分配
   我们给.grid-3设置grid-template-rows: auto repeat(auto-fit, 1fr)：

   • auto用来匹配右侧的标题行高度，让它自适应自身内容；
   • repeat(auto-fit, 1fr)会把剩余的垂直空间平均分配给所有.right元素，不管你有多少个这类元素，它们都会自动均分空间。

如果.right的数量是动态添加的（比如从后端接口获取），可以把右侧子网格的样式改成这样，更灵活：

.grid-3 {
  display: grid;
  grid-auto-rows: 1fr; /* 默认所有行均分空间 */
  gap: 8px;
}

/* 单独让第一个内容行（标题）自适应高度 */
.grid-3 > div:first-child {
  height: auto;
}

这样不管后续新增多少个.right元素，它们都会自动瓜分剩余空间，同时整个右侧子网格始终和左侧保持等高。

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