How can I align an element right below another one but with some spacing to the side?

Issue

How can I align an element right below another one but with some spacing to the side?

Solution

Use grid for that:

.container {
  padding: 10px;
  border: solid 1px;
  width: 100%;
  height: 300px;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: 10px;
  align-content: flex-start;
}

.item {
  padding: 20px;
  border: solid 1px;
  text-align: center;
}

.item2 {
  grid-column: 3 / 4;
}

.item4 {
  grid-column: 3 / 4;
}

<div class="container">
  <div class="item">1</div>
  <div class="item item2">2</div>
  <div class="item item3">3</div>
  <div class="item item4">4</div>
</div>

Answered By - Arman Ebrahimi