I'm trying to create a responsive grid layout with responsive, colored gaps, where the gap size is proportionate to the width of the parent container. The problem is that the vertical gap does not reach the bottom of the grid.

I have created a grid container where I set the gap size in % and the background color of the gaps (see below code and <https://jsfiddle.net/aavvww/o3Lcjd7w/16/>).
The problem does not occur if I set a fixed gap size in px.

```css
.container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 10%;
  background-color: black;
}

.pic {
  padding-bottom: 100%;
  background-size: contain;
  background-repeat: no-repeat;
  background-image: url(https://via.placeholder.com/512);
}
```

```html
<div class="container">
  <div class="pic"></div>
  <div class="pic"></div>
  <div class="pic"></div>
  <div class="pic"></div>
</div>
```

This question [Grid gap percentage without height](https://stackoverflow.com/questions/53563613/grid-gap-percentage-without-height) explains why the problem occurs but it does not give a solution.