Html 网格扩展网格中的其他元素

我面临一个问题，即扩展（添加更多内容以使其处于拉伸状态）网格中的一个项会扩展所有其他项，即使其他项没有额外的内容，这将需要它们在下面留出额外的空白

以下是我设置网格的方式：

.grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-template-rows: repeat(5, minmax(0, 1fr));
  gap: 5px 5px;
  grid-template-areas: "vcard vcard vcard3 vcard3" "vcard vcard vcard3 vcard3" "vcard2 vcard2 vcard3 vcard3" "vcard2 vcard2 vcard4 vcard4" "vcard2 vcard2 vcard4 vcard4";
  grid-gap: 10px;
  border: 1px solid #fff;
}

.vcard {
  grid-area: vcard;
}

.vcard2 {
  grid-area: vcard2;
}

.vcard3 {
  grid-area: vcard3;
}

.vcard4 {
  grid-area: vcard4;
}

当我向

div.vcard

添加额外文本时，它会按预期拉伸，但是

div.vcard3

和

div.vcard4

也会拉伸它们自己，即使我没有添加任何额外的内容。有没有办法避免这种行为？这样只有应该展开的元素才会展开

下面是一个工作示例：

---

通过向网格项目添加内容，您不仅扩展了项目，还扩展了行高度

再加上网格项默认设置为

align items:stretch

，您就有了扩展网格区域（可以由多行组成）全高度的项

您可以通过设置“对齐项目：开始”来覆盖默认设置，但它们只会收缩到项目的高度，而不会影响行高度（因为它是由最高的内容设置的）

*{
颜色：#fff；
文本阴影：1px 1px 0#000；
框大小：边框框；
字体系列：Ubuntu、Helvetica、Verdana、Arial、无衬线字体；
}
html{
背景：线性梯度（-10度，#C62828，#BA68C8）；
最小高度：100vh；
字体大小：22px；
}
身体{
填充：50px；
}
代码{
保证金：1px 5px；
填充物：2px 5px 1px 5px；
字体系列：monospace；
边界半径：2px；
边框：1px点#fff；
}
p{
利润率：25px 10px；
}
氢{
文本对齐：居中；
边缘顶部：50px；
}
a{
文字装饰：无；
}
a:悬停{
文字装饰：下划线；
}
.概述{
高度：200px；
边框：1px实心#fff；
边缘底部：50px；
}
.grid>*{
颜色：#fff；
背景色：rgba（255、255、255、0.15）；
边框：1px实心#fff；
边界半径：2px；
填充：20px；
/*利润率：10px*/
文本对齐：居中；
}
.网格a{
显示：块；
}
.grid>a：悬停{
背景色：rgba（255、255、255、0.25）；
文字装饰：无；
过渡：背景色缓和0.5s；
}
.电网{
显示：网格；
网格模板柱：1fr 1fr 1fr 1fr；
网格模板行：重复（5，最小值（0，1fr））；
间隙：5px 5px；
网格模板区域：“vcard vcard3 vcard3”“vcard vcard3 vcard3”“vcard2 vcard2 vcard3”“vcard2 vcard4 vcard4”“vcard2 vcard2 vcard4 vcard4”；
栅隙：10px；
边框：1px实心#fff；
/*新的*/
对齐项目：开始；
}
vcard先生{
网格区域：vcard；
}
.vcard2{
网格面积：vcard2；
}
.vcard3{
网格面积：vcard3；
}
.vcard4{
网格面积：vcard4；
}

Lorem ipsum dolor sit amet，clita quando的梅尔。这句话的意思是：“我的观点是不正确的，我的观点是不正确的。”。关于争议的共和国，我认为这是一种新的观点，因为我认为这是一种新的观点
托夸托斯。Lorem ipsum dolor sit amet，clita quando的梅尔。这句话的意思是：“我的观点是不正确的，我的观点是不正确的。”。年的共和国争端，没有理由，没有理由争论
这是一个很好的例子。Lorem ipsum Door sit amet，mel在clita quando。这句话的意思是：“我的观点是不正确的，我的观点是不正确的。”。争论的结果是，不需要争论，不需要争论
公元前1年，欧洲议会通过了一项决议，而欧洲议会通过了一项决议。这项决议的目的是为了保护所有人的合法权益。这句话的意思是：“我的观点是不正确的，我的观点是不正确的。”。
关于争议的共和国，我认为这是一种新的观点，因为它是一种新的观点。
Lorem ipsum dolor sit amet，clita quando的梅尔。这句话的意思是：“我的观点是不正确的，我的观点是不正确的。”。关于争议的共和国，我认为这是一种新的观点，因为我认为这是一种新的观点
torquatos。Lorem ipsum dolor坐在amet，mel在clita quando。这句话的意思是：“我的观点是不正确的，我的观点是不正确的。”。年的共和国争端，没有理由，没有理由争论
这是一个很好的例子。Lorem ipsum Door sit amet，mel在clita quando。这句话的意思是：“我的观点是不正确的，我的观点是不正确的。”。争论的结果是，不需要争论，不需要争论
公元前1世纪。
表格项目3
Lorem ipsum dolor sit amet，clita quando的梅尔。这句话的意思是：“我的观点是不正确的，我的观点是不正确的。”。关于争议的共和国，我认为这是一种新的观点，因为我认为这是一种新的观点
torquatos。Lorem ipsum dolor坐在amet，mel在clita quando。这句话的意思是：“我的观点是不正确的，我的观点是不正确的。”。年的共和国争端，没有理由，没有理由争论
胡斯托·埃克·托夸托斯。