title: How to have responsive gaps in grid layout
body: <p>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.</p>
  
  <p>I have created a grid container where I set the gap size in % and the background color of the gaps (see below code and <a href="https://jsfiddle.net/aavvww/o3Lcjd7w/16/" rel="nofollow noreferrer">https://jsfiddle.net/aavvww/o3Lcjd7w/16/</a>).
  The problem does not occur if I set a fixed gap size in px.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.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);
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="container"&gt;
    &lt;div class="pic"&gt;&lt;/div&gt;
    &lt;div class="pic"&gt;&lt;/div&gt;
    &lt;div class="pic"&gt;&lt;/div&gt;
    &lt;div class="pic"&gt;&lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>This question <a href="https://stackoverflow.com/questions/53563613/grid-gap-percentage-without-height">Grid gap percentage without height</a> explains why the problem occurs but it does not give a solution.</p>