如何以马赛克方式放置卡片？

Question

每张卡的高度必须为max-content。

为了证明问题，我已经将height设置为特定值。

.container {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-column-gap: 5%;
    grid-auto-rows: min-content;
}

.card {
    background-color: lightblue;
}

<div class="container">
	<div class="card" style="height: 100px">
		1
	</div>
  <div class="card" style="height: 200px">
		2
	</div>
  <div class="card" style="height: 200px">
		3
	</div>
  <div class="card" style="height: 200px">
		4
	</div>
  <div class="card" style="height: 200px">
		5
	</div>
  <div class="card" style="height: 200px">
		6
	</div>
  <div class="card" style="height: 200px">
    7
	</div>
</div>

问题是-1和3卡之间有空白。需要练习-没有多余的空白，每张卡都必须具有确切的高度。

我已经尝试过-grid-auto-rows: min-content-但没有结果。

具有不同高度的卡必须准确地一张一张一张。没有多余的空白。 （通过马赛克方式）。

Answer 1

如果我是正确的，那是因为1的height被内联设置为100px。

如果删除每个.card <div>的高度设置，它应该可以解决此问题。然后，如果您在.card中添加最小高度，则它们应该是统一的。