Align columns using grid-template-columns

I have two sections using CSS grid and grid-template-columns. The 1st one shows 4 boxes per row, while the 2nd one shows 3.

Since the first element of this 2nd section has 50%, I'd like the space/gap next to it to match the space/gap of the 1st section (see image below).

How can I achieve this? Using 2fr instead of 50% doesn't fix the problem.

<style>
#grid1 .container, #grid2 .container {
    display: grid;
    gap: 12px;
    grid-auto-flow: column;
    margin-bottom: 20px;
}
#grid1 .container div, #grid2 .container div {
    border: 1px solid #c00;
    background-color: #ca3c46;
    color: #fff;
    font-weight: bold;
    text-align: center;
    padding: 20px;
}
#grid1 .container {
    grid-template-columns: repeat(4, 1fr);
}
#grid2 .container {
    grid-template-columns: 50% 1fr 1fr;
}
</style>

<div id="grid1">
    <div class="container">
        <div>Box 1</div>
        <div>Box 2</div>
        <div>Box 3</div>
        <div>Box 4</div>
    </div>
</div>

<div id="grid2">
    <div class="container">
        <div>Box 1</div>
        <div>Box 2</div>
        <div>Box 3</div>
    </div>
</div>

https://jsfiddle.net/k3swL4f9/2

The containers should have the same grid layout (4 columns). Use grid-column: span 2; on the 1st div of the 2nd container.

.grid .container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 20px;
}

.grid .container div {
  border: 1px solid #c00;
  background-color: #ca3c46;
  color: #fff;
  font-weight: bold;
  text-align: center;
  padding: 20px;
}

.grid .container2 div:first-child {
  grid-column: span 2;
}

<div class="grid">
  <div class="container">
    <div>Box 1</div>
    <div>Box 2</div>
    <div>Box 3</div>
    <div>Box 4</div>
  </div>
</div>  

<div class="grid">
  <div class="container container2">
    <div>Box 1</div>
    <div>Box 2</div>
    <div>Box 3</div>
  </div>
</div>