Html CSS网格根据内容调整网格区域

我已经在Grid上工作了一段时间，但有一件事我仍然不太清楚。使用两列布局时，有时一列的内容会强制另一列的内容在其下方留有较大的间隙，因为第一列的内容较长。是否有办法使每个网格单元垂直收缩以适合该单元的内容？有关示例，请参见所附的代码段

.parent{
显示：网格；
网格模板列：重复（2，1fr）；
栅柱间隙：30px；
网格行间距：30px；
最大宽度：300px；
}
.孩子{
边框：1px实心#000；
}

内容
内容内容
内容
内容

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

.parent{
显示：网格；
网格模板列：重复（2，1fr）；
栅柱间隙：30px；
网格行间距：30px；
最大宽度：300px；
}
.child>div{
边框：1px实心#000；
}

内容
内容内容
内容
内容

关闭。唯一的问题是，我希望左下角的网格区域向上移动，在左上角网格区域和左下角网格区域之间保持与右下角网格区域相同的网格行间距。所以它们变得交错。看起来你在做砖石布局。你读过这类版面吗？Grid不能这么做是的，这就是我要找的词。它基本上变成了一个砖石结构。我想这一次不可能使用网格。请检查：