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

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; background-color: yellow">
  2
 </div>
  <div class="card" style="height: 200px; background-color: yellow">
  3
 </div>
  <div class="card" style="height: 200px">
  4
 </div>
  <div class="card" style="height: 200px; background-color: green">
  5
 </div>
  <div class="card" style="height: 200px; background-color: red">
  6
 </div>
  <div class="card" style="height: 200px">
    7
 </div>
</div>

问题是-1和3[=36之间有一个白色space =] 卡片。需要实现 - 没有这个额外的白色 space。卡片 3 需要正好在 1

之后
我试过了 - grid-auto-rows: min-content - 但没有结果。

不同高度的卡片需要一张接一张。没有额外的白色 space。（通过马赛克方式）。

Answer 1

您要实现的目标称为 Masonry Layout。

你会在这里找到很多例子https://css-tricks.com/piecing-together-approaches-for-a-css-masonry-layout/ 我希望它能帮助您找到更适合您需求的选项。

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

How to place Cards by Mosaic way?

html

css

grid

layout

floating

您要实现的目标称为 Masonry Layout。