JSFiddle - React, Tailwind, and code Playground

HTML

<div class="grid">
  <div class="no-padding">Item with no padding</div>
  <div class="no-padding">Item with no padding</div>
  
  <div class="inner-padding">Item with inner padding</div>
  <div class="inner-padding">Item with inner padding</div>
  
  <div class="gutter-padding">Item with gutter as padding</div>  
  <div class="gutter-padding">Item with gutter as padding</div>
    
  <div class="no-padding">Item with no padding</div>
  <div class="no-padding">Item with no padding</div>
  
</div>

CSS

.grid {
  display: grid;
  grid-template-columns: [grid-start] 0px 1fr [grid-middle0] 0px [grid-middle1] 1fr 0px [grid-end];
  grid-auto-rows: minmax(100px, auto);
  grid-gap: 20px 10%;
  grid-auto-flow: row dense;
}

.no-padding {
  grid-column: 2;
  padding: 20px 0;
}

.inner-padding {
  grid-column: 2;
  padding: 20px;
}

.no-padding + .no-padding, .inner-padding + .inner-padding {
  grid-column: 4;
}

.gutter-padding {
  grid-column: grid-start/grid-middle1;
  padding: 20px 20%;
  grid-row: 3;
}

.gutter-padding + .gutter-padding {
  grid-column: grid-middle0/grid-end;
}

.inner-padding, .gutter-padding {
  background: blue;
  color: #fff;
}

.inner-padding + .inner-padding, .gutter-padding + .gutter-padding {
  background: purple;
}

.no-padding:nth-child(n + 3) {
  grid-row: 4;
  color: #fff;
}

.grid::before {
  content: '';
  grid-column: grid-start/grid-middle1;
  grid-row: 4;
  background: blue;
  z-index: -1;
}

.grid::after {
  content: '';
  grid-column: grid-middle0/grid-end;
  grid-row: 4;
  background: purple;
  z-index: -1;
}