How do I place a div/card like this?

Question

I'm having trouble positioning a div like the one in the photo.

<div class="cards" id="cards">
      <div class="container">
        <div class="single">
          <span class="dot"></span>
        </div>
        <div class="single">


          <span class="dot"></span>
        </div>
        <div class="second">
          <span class="dot"></span>
        </div>
        <div class="second">
          <span class="dot"></span>
        </div>
      </div>
    </div>

I've tried something like this, but I'm having trouble styling and positioning it using css.

A single div is named after the first two cards/divs. The second div is named the second card/div down.

Answer 1

CSS Grid can help you with these types of layouts. Study the code below to see how to lay out the boxes based on the model.

Be sure to carefully study the following section on MDN about Grid Template Areas: Leave Grid Cells Blank

div {
  border: 1px solid black;
}
.strategy {
  grid-area: strategy;
}
.efficient {
  grid-area: efficient;
}
.fast {
  grid-area: fast;
}
.reliable {
  grid-area: reliable;
}
.wrapper {
  width: 500px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: minmax(100px, auto);
  grid-template-areas:
    "fast efficient ." /* 3 cols: fast / efficient / . === empty col */
    ". strategy reliable";
}

<section class="wrapper">
  <div class="fast">Fast</div>
  <div class="efficient">Efficient</div>
  <div class="strategy">Strategy</div>
  <div class="reliable">Reliable</div>
</section>

Resources: The Complete Guide to CSS Grid