我正在研究网格布局，其中有不同尺寸（小型和中型）的内容卡。网格项是动态生成的，我想通过重新排列它们来避免空白，例如中型卡片向上移动以填充第一行，小卡片向下移动以避免空白。
我期待 css 属性
grid-auto-flow: dense预期结果： 第一行：【小卡、中卡】（共填3列） 第二行：【小卡，空，空】
<html>
<style>
.wrapper {
display: grid;
grid-template-columns: repeat(3, minmax(120px, 1fr));
gap: 10px;
grid-auto-flow: dense;
}
.wrapper {
border: 1px solid blue;
}
.medium_card, .small_card {
padding: 12px;
}
.wrapper div.small_card {
background-color: red;
}
.wrapper div.medium_card {
background-color: green;
grid-column-end: span 2;
}
</style>
<body>
<div class="wrapper">
<div class="small_card">Small Card 1 (span 1)</div>
<div class="small_card">Small Card 2 (span 1)</div>
<div class="medium_card">Medium Card (span 2)</div>
</div>
</body>
</html>空白是由网格模板列引起的，因为您重复了三次而不是两次。
将此
grid-template-columns: repeat(3, minmax(120px, 1fr));grid-template-columns: repeat(2, minmax(120px, 1fr));下面是工作示例。
<html>
<style>
.wrapper {
display: grid;
grid-template-columns: repeat(2, minmax(120px, 1fr));
gap: 10px;
grid-auto-flow: dense;
}
.wrapper {
border: 1px solid blue;
}
.medium_card, .small_card {
padding: 12px;
}
.wrapper div.small_card {
background-color: red;
}
.wrapper div.medium_card {
background-color: green;
grid-column-end: span 2;
}
</style>
<body>
<div class="wrapper">
<div class="small_card">Small Card 1 (span 1)</div>
<div class="small_card">Small Card 2 (span 1)</div>
<div class="medium_card">Medium Card (span 2)</div>
</div>
</body>
</html>