CSS网格使网格区域适合内容

Question

我使用Grid已经有一段时间了，有一件事我仍然不太清楚。当使用两列布局时，有时一列的内容会迫使另一列的属性在其下方有很大的间隙，因为第一列的内容更长。有没有一种方法可以使每个网格单元格垂直收缩以适应该单元格的内容？有关示例，请参阅所附的代码段。

.parent {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-column-gap: 30px;
grid-row-gap: 30px;
max-width: 300px;
}
.child {
border: 1px solid #000;
}

<div class="parent">
<div class="child">
Content Content Content
</div>
<div class="child">
Content Content Content Content Content Content Content
</div>
<div class="child" id="child2">
Content Content Content
</div>
<div class="child">
Content Content Content
</div>
</div>

在这个片段中，您将看到左上角网格区域的内容由于右上角的内容而在下面有一个很大的间隙。有没有办法让它缩小以消除间隙？我不完全确定这是可能的单独网格。

Answer 1

您可以在.child中添加另一个div并对其应用border。不确定这是否是您的目标。

.parent {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-column-gap: 30px;
grid-row-gap: 30px;
max-width: 300px;
}
.child>div {
border: 1px solid #000;
}

<div class="parent">
<div class="child"><div>Content Content Content</div></div>
<div class="child"><div>Content Content Content Content Content Content Content</div></div>
<div class="child"><div>Content Content Content</div></div>
<div class="child"><div>Content Content Content</div></div>
</div>