卡片并列展示

Question

我是前端新手。我有四张卡片，排成两行。我想以这样的方式对齐它们，使下一张卡片覆盖其他卡片的 space。我尝试了多种方法，但它要么与连续顶部卡片的底部对齐，要么与顶部对齐。检查下图我想要实现的目标。

Answer 1

我认为实现这种外观的最佳方法是使用 Flexbox 并设置 flex-direction: column。然后你可以设置 flex-wrap: wrap 然后最后在父元素上放置一个绝对高度。

Answer 2

你可以试试网格：

.container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(4, 1fr);
  gap: 1em;
  height: 300px;
  width: 100%;
  justify-items: center;
  margin: 0 auto;
}
.item {
  width: 100%;
  background: grey;
}
.lefttop { grid-area: 1 / 1 / 3 / 2; }
.leftbottom { grid-area: 3 / 1 / 5 / 2; }
.righttop { grid-area: 1 / 2 / 2 / 3; }
.rightbottom { grid-area: 2 / 2 / 5 / 3; }

<div class="container">
  <div class="item lefttop"></div>
  <div class="item leftbottom"></div>
  <div class="item righttop"></div>
  <div class="item rightbottom"></div>
</div>

卡片并列展示

Card display in parallel

css

layout