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

Question

我在一个网格中嵌套了两个网格。不幸的是，右边嵌套的网格div设置了行的高度，这样左边和右边的网格都是相同的高度，额外的空间在.right类的.grid-3之间共享。如何设置右侧嵌套网格的行以调整内容的大小，使它们与左侧嵌套行的高度相同？

​

div {
  border: 1px dotted black;
}
.grid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-auto-rows auto;
}

.grid-3 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-auto-rows auto;
}

.left {
  background-color: red;
}
 
.right {
  background-color: green;
}

<div class="grid-2">
      <div class="grid-2">
        <div class="left">L</div>
        <div class="left">L</div>
        <div class="left">L</div>
        <div class="left">L</div>
        <div class="left">L</div>
        <div class="left">L</div>
        <div class="left">L</div>
        <div class="left">L</div>
        <div class="left">L</div>
        <div class="left">L</div>
        <div class="left">L</div>
        <div class="left">L</div>
        <div class="left">L</div>
        <div class="left">L</div>
        <div class="left">L</div>
        <div class="left">L</div>
        <div class="left">L</div>
        <div class="left">L</div>
     </div>
     <div class="grid-3">
         <div class="right">R</div>
        <div class="right">R</div>
        <div class="right">R</div>
        <div class="right">R</div>
        <div class="right">R</div>
        <div class="right">R</div>
        <div class="right">R</div>
        <div class="right">R</div>
        <div class="right">R</div>
        <div class="right">R</div>
        <div class="right">R</div>
        <div class="right">R</div>
        <div class="right">R</div>
     </div>
</div>

​

Answer 1

默认情况下，网格项目会延伸到所有网格单元格区域。因此，如果你想要网格的高度适合内容，你可以在这里选择：

• 使用align-items为网格容器设置所有项目的对齐方式(默认值为align-items: stretch)。所以只需为grid-2设置align-items: start即可。演示：

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

• 使用align-self分别设置网格项目的对齐方式(默认值为align-self: stretch)。所以只需为grid-3设置align-self: start即可。演示：

.right {边框: 1px虚线黑色；} .grid-2 {显示:网格；网格模板-列: repeat(2，1fr)；} .grid-3 {显示:网格；网格模板-列: 1fr 1fr；对齐自身:开始；} .left {背景色:红色；}.right{背景色:绿色；}

• 使用具有auto值的margin属性分别设置网格项的对齐方式。网格单元的自动边距在任何方向上占用所有可用空间。所以只需为grid-3设置margin-bottom: auto即可。演示：

.right {边框: 1px虚线黑色；}. .left -2{显示:网格；网格模板-列:重复(2，1fr)；}.网格-3{显示:网格；网格模板-列: 1fr 1fr；边距-底部:自动；}.right{背景色:红色；} div {背景色:绿色；}

如果您希望右侧网格占据所有父级垂直空间，但使其单元格适合内容，请使用this answer。

Answer 2

您也可以尝试使用grid-auto-rows: fit-content(1em);。当然，使用对您有意义的任何大小。我还尝试了Temani (minmax(min-content, max-content))所描述的方法，在呈现我的HTML时结果是相同的。

根据Elad Schechter - Medium的说法，

-content函数接受一个参数，即最大值。..。fit-content()函数类似于使用minmax()函数，其最小值为0。一个关键的区别是: minmax()更有可能占用所允许的最大空间，而fit-content不会占用超过必要的空间。

您的需求将决定fit-content是否比使用minmax更合适，反之亦然。