JSFiddle - React, Tailwind, and code Playground

HTML

<div class="grid-wrapper">
  <div class="grid-item">1</div>
  <div class="grid-item">2</div>
  <div class="grid-item">3</div>
  <div class="grid-item">4</div>
  <div class="grid-item">5</div>
  <div class="grid-item">6</div>
</div>

SCSS

.grid-wrapper {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(auto-fill, minmax(100px, 1fr));
  justify-content: center;
  gap: 2.5rem 2rem;
}

.grid-item {
  grid-column: 1 / 3;
  border: 1px solid #000;
  
  &:nth-last-child(-n+2) {
    grid-column: auto;
  }
}