我面临着一个问题，即扩展（添加更多内容以便拉伸）网格中的一项会扩展所有其他项，即使其他项没有多余的内容会要求它们扩展而在下面留出额外的空白。
这是我设置网格的方式：
.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也会自我拉伸，即使我没有为它们添加任何额外的内容。有办法避免这种行为吗？这样，只有应该扩展的元素才会扩展。
这里是工作示例：codepen
通过向网格项目添加内容，您不仅在扩展项目，而且还在扩展行高。
将网格项目默认情况下设置为align-items: stretch，并且您具有可扩展每一行的整个高度的项目。
您可以通过设置align-items: start来覆盖默认值，但是它们只会缩小到项目的高度，而不会影响行高。
* {
color: #fff;
text-shadow: 1px 1px 0 #000;
box-sizing: border-box;
font-family: Ubuntu, Helvetica, Verdana, Arial, sans-serif;
}
html {
background: linear-gradient(-10deg, #C62828, #BA68C8);
min-height: 100vh;
font-size: 22px;
}
body {
padding: 50px;
}
code {
margin: 1px 5px;
padding: 2px 5px 1px 5px;
font-family: monospace;
border-radius: 2px;
border: 1px dotted #fff;
}
p {
margin: 25px 10px;
}
h2 {
text-align: center;
margin-top: 50px;
}
a {
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
.outlined {
height: 200px;
border: 1px solid #fff;
margin-bottom: 50px;
}
.grid>* {
color: #fff;
background-color: rgba(255, 255, 255, 0.15);
border: 1px solid #fff;
border-radius: 2px;
padding: 20px;
/*margin: 10px;*/
text-align: center;
}
.grid a {
display: block;
}
.grid>a:hover {
background-color: rgba(255, 255, 255, 0.25);
text-decoration: none;
transition: background-color ease 0.5s;
}
.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;
/* NEW */
align-items: start;
}
.vcard {
grid-area: vcard;
}
.vcard2 {
grid-area: vcard2;
}
.vcard3 {
grid-area: vcard3;
}
.vcard4 {
grid-area: vcard4;
}<html>
<head>
</head>
<body>
<div class="grid">
<div class="vcard">Lorem ipsum dolor sit amet, mel at clita quando. Te sit oratio vituperatoribus, nam ad ipsum posidonium mediocritatem, explicari dissentiunt cu mea. Repudiare disputationi vim in, mollis iriure nec cu, alienum argumentum ius ad. Pri eu justo aeque
torquatos. Lorem ipsum dolor sit amet, mel at clita quando. Te sit oratio vituperatoribus, nam ad ipsum posidonium mediocritatem, explicari dissentiunt cu mea. Repudiare disputationi vim in, mollis iriure nec cu, alienum argumentum ius ad. Pri eu
justo aeque torquatos.Lorem ipsum dolor sit amet, mel at clita quando. Te sit oratio vituperatoribus, nam ad ipsum posidonium mediocritatem, explicari dissentiunt cu mea. Repudiare disputationi vim in, mollis iriure nec cu, alienum argumentum ius
ad. Pri eu justo aeque torquatos.ec cu, alienum argumentum ius ad. Pri eu justo aeque torquatos.Lorem ipsum dolor sit amet, mel at clita quando. Te sit oratio vituperatoribus, nam ad ipsum posidonium mediocritatem, explicari dissentiunt cu mea.
Repudiare disputationi vim in, mollis iriure nec cu, alienum argumentum ius ad. Pri eu justo aeque torquatos.
</div>
<div class="vcard2">Lorem ipsum dolor sit amet, mel at clita quando. Te sit oratio vituperatoribus, nam ad ipsum posidonium mediocritatem, explicari dissentiunt cu mea. Repudiare disputationi vim in, mollis iriure nec cu, alienum argumentum ius ad. Pri eu justo aeque
torquatos.Lorem ipsum dolor sit amet, mel at clita quando. Te sit oratio vituperatoribus, nam ad ipsum posidonium mediocritatem, explicari dissentiunt cu mea. Repudiare disputationi vim in, mollis iriure nec cu, alienum argumentum ius ad. Pri eu
justo aeque torquatos.Lorem ipsum dolor sit amet, mel at clita quando. Te sit oratio vituperatoribus, nam ad ipsum posidonium mediocritatem, explicari dissentiunt cu mea. Repudiare disputationi vim in, mollis iriure nec cu, alienum argumentum ius
ad. Pri eu justo aeque torquatos.</div>
<div class="vcard3">Grid item 3</div>
<div class="vcard4">Lorem ipsum dolor sit amet, mel at clita quando. Te sit oratio vituperatoribus, nam ad ipsum posidonium mediocritatem, explicari dissentiunt cu mea. Repudiare disputationi vim in, mollis iriure nec cu, alienum argumentum ius ad. Pri eu justo aeque
torquatos.Lorem ipsum dolor sit amet, mel at clita quando. Te sit oratio vituperatoribus, nam ad ipsum posidonium mediocritatem, explicari dissentiunt cu mea. Repudiare disputationi vim in, mollis iriure nec cu, alienum argumentum ius ad. Pri eu
justo aeque torquatos.</div>
</div>
</body>
</html>似乎您正在寻找的是砌体布局。这是一篇可能有帮助的文章：