在我将任何东西添加到3个div中的一个之后，其他div的高度会扩展到最大的一个，有什么方法可以删除这种自动调整大小吗？代码示例(box1和box3扩展到box2的大小)：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="gridBody">
<div> box1 (show this without the width of the second line)</div>
<div> box2<div> second line</div> </div>
<div> box3 (show this without the width of the second line)</div>
</div>
<style>
.gridBody {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
}
.gridBody div {
margin: 20px;
padding: 20px;
background: rgba(0, 0, 0, 0.5);
}
</style>
</body>
</html>我尝试了grid-auto-rows/grid-auto-columns:min-content，并希望它将box1和box3的大小调整到最小内容，但它不起作用
似乎可以将align-items: start添加到gridBody中，以避免其他div扩展到最大的高度。
默认情况下，网格布局将以类似于align-items: stretch的行为放置项目，这导致所有div拉伸到全高。
关于align-items的更多信息
示例：
.gridBody {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
/* Add this line */
align-items: start;
}
.gridBody div {
margin: 20px;
padding: 20px;
background: rgba(0, 0, 0, 0.5);
}<div class="gridBody">
<div> box1 (show this without the width of the second line)</div>
<div> box2
<div> second line</div>
</div>
<div> box3 (show this without the width of the second line)</div>
</div>