Card display in parallel

Question

I am new to frontend. I have four cards arranged in two rows. I want to align these in such a way that next card covers the space of other. I have tried multiple ways but it either aligns to the bottom of top cards in a row or to top. Check the image below to what I want to achieve.

Answer 1

You can try with grid:

.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>