CSS网格-自动调整行的高度，根据内容调整大小

我有两个网格嵌套在一个网格中。不幸的是，右侧嵌套网格

.grid-3

设置了行的高度，因此左侧和右侧网格的高度相同，额外的空间在div之间与类

.right

共享。如何设置右侧嵌套网格的行以调整内容的大小，使其与左侧嵌套行的高度相同

div{
边框：1px点黑色；
}
.grid-2{
显示：网格；
网格模板列：重复（2，1fr）；
网格自动行自动；
}
.grid-3{
显示：网格；
网格模板柱：1fr 1fr 1fr；
网格自动行自动；
}
.左{
背景色：红色；
}
.对{
背景颜色：绿色；
}

L
L
L
L
L
L
L
L
L
L
L
L
L
L
L
L
L
L
R
R
R
R
R
R
R
R
R
R
R
R
R

您可以尝试

minmax（最小内容，最大内容）

div{
边框：1px点黑色；
}
.grid-2{
显示：网格；
网格模板列：重复（2，1fr）；
网格自动行：最小最大（最小内容，最大内容）；
}
.grid-3{
显示：网格；
网格模板柱：1fr 1fr 1fr；
网格自动行：最小最大（最小内容，最大内容）；
}
.左{
背景色：红色；
}
.对{
背景颜色：绿色；
}

L
L
L
L
L
L
L
L
L
L
L
L
L
L
L
L
L
L
R
R
R
R
R
R
R
R
R
R
R
R
R

默认情况下，网格项延伸到所有网格单元区域。因此，如果希望网格的高度适合内容，您可以在此处使用以下选项：

• 使用网格容器的

  align items

  设置所有项目的对齐方式（默认值为

  align items:stretch

  ）。所以只需为

  grid-2

  设置

  align items:start

  。演示：

  div{
  边框：1px点黑色；
  }
  .grid-2{
  显示：网格；
  网格模板列：重复（2，1fr）；
  对齐项目：开始；
  }
  .grid-3{
  显示：网格；
  网格模板柱：1fr 1fr 1fr；
  }
  .左{
  背景色：红色；
  }
  .对{
  背景颜色：绿色；
  }

  
  L
  L
  L
  L
  L
  L
  L
  L
  L
  L
  L
  L
  L
  L
  L
  L
  L
  L
  R
  R
  R
  R
  R
  R
  R
  R
  R
  R
  R
  R
  R
  

  您也可以尝试

  网格自动行：调整内容（1em）。当然，使用任何适合你的尺寸。我还尝试了
  Temani（
  minmax（mincontent，max content）
  ），在呈现我的HTML时，结果是相同的
  
  根据,
  
  fit content函数接受一个参数，即最大值。。。fit-content（）函数类似于使用minmax（）函数，最小值为0。一个关键区别是：minmax（）更可能占用允许的最大空间，而fit内容占用的空间不会超过需要
  
  您的需要将决定
  fit content
  是否比使用
  minmax
  更合适，反之亦然。
  请注意
  grid-3
  将采用此处的所有父级高度。如果您希望网格-3的高度适合您可以使用的内容，那么您提出的解决方案很好，但随后出现了另一个问题：空白处创建了一个额外的空间，但没有填充内容。我怎样才能告诉网格系统我只需要列中的元素？也许我应该在这里使用flex。。。Thanks@LucioB对不起，我不明白你的问题。也许最好问一个包含所有细节和示例的单独问题，并在这里的评论中向我发布链接。根据我所看到的，LucioB说，使用
  对齐项：start
  ，网格内容的底部在内容结束的地方结束，而不是网格单元格结束的地方，因此下面的下一行有一个额外的大小间隙。