慕盖茨4494581
通过向网格项目添加内容，您不仅可以扩展项目，还可以扩展行高。再加上网格项默认设置为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>看来您正在寻找的是砖石布局。