Arrange columns of two different grids with gaps in line

February 7, 2022

How do I get the two grid cells "right" and "col" in a line below each other without adjusting the HTML?
Without gaps this is not a problem, but as soon as gaps are added, the columns are no longer in line.

*, *::before, *::after {
  box-sizing: border-box;
}

.OuterContainer {
  display: grid;
  column-gap: 32px;
  grid-template-columns: 1fr 3fr;
}

.Col4Grid {
    display: grid;
    column-gap: 32px;
    grid-template-columns: 1fr 1fr 1fr 1fr;
}


.Col {
  background-color: #e7e7e7;
}

<div class="OuterContainer">
  <div class="Col">
    left
  </div>
  <div class="Col">
    right
  </div>
</div>

<div class="Col4Grid">
  <div class="Col">col</div>
  <div class="Col">col</div>
  <div class="Col">col</div>
  <div class="Col">col</div>
</div>

>Solution :

I hope I got your intended layout correct. Just apply the same grid-column rule to both containers. then let the column (right) span 3 columns with: grid-column: span 3;

*, *::before, *::after {
  box-sizing: border-box;
}

.OuterContainer,
.Col4Grid {
  display: grid;
  column-gap: 32px;
  grid-template-columns: repeat(4, 1fr);
}

.Col {
  background-color: #e7e7e7;
}

.OuterContainer .Col:nth-child(2) {
  grid-column: span 3;
}

<div class="OuterContainer">
  <div class="Col">
    left
  </div>
  <div class="Col">
    right
  </div>
</div>

<div class="Col4Grid">
  <div class="Col">col</div>
  <div class="Col">col</div>
  <div class="Col">col</div>
  <div class="Col">col</div>
</div>