CSS Grid: column-gap forces parent to overflow

Question

I want to achieve 12 column grid behavior similar to what Bootstrap has, but using CSS grids.

1. I need to have a fixed gaps in pixels
2. And have a 12 column grid, so I can decide how to place the children.

I'm facing the issue, that combination of grid-template-columns and column-gap doesn't shrink the columns on a smaller screens, but cause horizontal overflow on a screen.

How can I achieve expected behavior with shrinking without reducing the number of columns and keeping the gap in pixels.

DEMO:

.parent {
  max-width: 300px;
  height: 500px;
  overflow: auto;
  border: 1px solid blue;
}

.box {
  grid-column: span 6 / span 6;
  background: red;
  height: 40px;
}

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

<div class="parent">
  <div class="grid">
    <div class="box"></div>
    <div class="box"></div>
  </div>
</div>