title: Why does CSS Grid layout add extra gaps between cells?
body: <p>Can’t figure out why CSS grid layout adds an unwanted extra space to content around the vertical cells, though margin and padding are zeroed out:</p>
  
  <p><a href="https://i.stack.imgur.com/8ZDIA.png" rel="noreferrer"><img src="https://i.stack.imgur.com/8ZDIA.png" alt="images positioned with CSS grid"></a></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>.grid {
    display: grid;
    grid-template-columns: 13fr 11fr 4fr 20fr;
    grid-auto-rows: 12fr;
    grid-gap: 4px;
    align-items: center;
  }
  
  .grid figure {
    outline: 1px solid red;
    margin: 0;
    padding: 0;
  }
  
  .grid figure img {
    margin: 0;
    padding: 0;
    width: 100%;
    display: block;
  }
  
  .grid .gi13x12 {
    grid-column-start: 1;
    grid-column-end: 2;
    grid-row-start: 1;
    grid-row-end: 13;
  }
  
  .grid .gi11x6.one {
    grid-column-start: 2;
    grid-column-end: 3;
    grid-row-start: 1;
    grid-row-end: 7;
  }
  
  .grid .gi11x6.two {
    grid-column-start: 2;
    grid-column-end: 3;
    grid-row-start: 7;
    grid-row-end: 13;
  }
  
  .grid .gi4x4.one {
    grid-column-start: 3;
    grid-column-end: 4;
    grid-row-start: 1;
    grid-row-end: 5;
  }
  
  .grid .gi4x4.two {
    grid-column-start: 3;
    grid-column-end: 4;
    grid-row-start: 5;
    grid-row-end: 9;
  }
  
  .grid .gi4x4.three {
    grid-column-start: 3;
    grid-column-end: 4;
    grid-row-start: 9;
    grid-row-end: 13;
  }
  
  .grid .gi20x12 {
    grid-column-start: 4;
    grid-column-end: 5;
    grid-row-start: 1;
    grid-row-end: 13;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="grid"&gt;
    &lt;figure class="gi13x12"&gt;
      &lt;img itemprop="image" src="http://placehold.it/130x123"&gt;
    &lt;/figure&gt;
    &lt;figure class="gi11x6 one"&gt;
      &lt;img itemprop="image" src="http://placehold.it/110x60"&gt;
    &lt;/figure&gt;
    &lt;figure class="gi11x6 two"&gt;
      &lt;img itemprop="image" src="http://placehold.it/110x60"&gt;
    &lt;/figure&gt;
    &lt;figure class="gi4x4 one"&gt;
      &lt;img itemprop="image" src="http://placehold.it/40x39"&gt;
    &lt;/figure&gt;
    &lt;figure class="gi4x4 two"&gt;
      &lt;img itemprop="image" src="http://placehold.it/40x39"&gt;
    &lt;/figure&gt;
    &lt;figure class="gi4x4 three"&gt;
      &lt;img itemprop="image" src="http://placehold.it/40x39"&gt;
    &lt;/figure&gt;
    &lt;figure class="gi20x12"&gt;
      &lt;img itemprop="image" src="http://placehold.it/200x120"&gt;
    &lt;/figure&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><a href="https://jsfiddle.net/adanchenkov/dy77hk9k/" rel="noreferrer">https://jsfiddle.net/adanchenkov/dy77hk9k/</a></p>