<div class="grid" style="--cols: 10;">
    <div class="item">1</div>
    <div class="item" style=" --span: 7;">
      <div class="grid" style="--cols: 2;">
        <div class="item">1</div>
        <div class="item">2</div>
      </div>
    </div>
    <div class="item">3</div>
    <div class="item">4</div>
  </div>

:root {
  --yellow: #ffc600;
}

.grid {
  display: grid;
  grid-gap: 20px;
  grid-template-columns: repeat(var(--cols, 12), minmax(0, 1fr));
}

.item {
  display: grid;
  justify-content: center;
  align-items: center;
  border: 5px solid rgba(0, 0, 0, 0.03);
  border-radius: 3px;
  font-size: 35px;
  background-color: var(--yellow);
  min-width: 0;
  width: 100%;
  --span: 1;
  grid-column: span var(--span);
}

.item p {
  margin: 0 0 5px 0;
}


.item {
  
}