CSS layout : grid

.grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-template-rows: 100px 100px 100px;
  gap: 10px;
}

.item1 {

}

.item2 {

}
<div class="grid">
  <div class="item1">One</div>
  <div class="item2">Two</div>
</div>

How can i get the following result?

using grid? I am not sure if you can have multiple elements occupying the same cell, but if that is the case you need to use grid-column and grid-row with the right values for each element

You can overlap grid items. You have to explicitly set the column/rows or use grid-template-areas/grid-area