title: grid-auto-columns does not completely work in Firefox
body: <p>I don't understand why DIV 3 is not the same size as DIV 1 + DIV 2.<br>
  <a href="https://codepen.io/anon/pen/vaVqPW" rel="nofollow noreferrer">https://codepen.io/anon/pen/vaVqPW</a></p>
  
  <pre><code>.grid {
    display: grid;
    grid-auto-columns: 1fr 1fr; /* I also tried 50% 50% */
    grid-gap: 20px;
  }
  </code></pre>
  
  <p>Firefox 61 should support css grid  according to caniuse
  <a href="https://caniuse.com/#feat=css-grid" rel="nofollow noreferrer">https://caniuse.com/#feat=css-grid</a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="true" data-console="true" data-babel="false">
  <div class="snippet-code snippet-currently-hidden">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>* {
    box-sizing: border-box;
  }
  
  .grid {
    display: grid;
    grid-auto-columns: 1fr 1fr;
    grid-gap: 20px;
  }
  
  .content {
    grid-column: 1;
    background: red;
  }
  
  .sidebar {
    grid-column: 2;
    background: blue;
  }
  
  .grid&gt;* {
    /*border: 1px dashed red; */
    /* demo only */
  }
  
  .box {
    width: 50%;
    height: 75px;
    background-color: black;
    color: #fff;
    padding: 20px;
    position: relative;
    float: left;
  }
  
  .box100 {
    width: 100%;
    height: 75px;
    color: #fff;
    padding: 20px;
  }
  
  .box.arrow-left:after {
    content: " ";
    position: absolute;
    left: -15px;
    margin-top: -15px;
    top: 50%;
    border-top: 15px solid transparent;
    border-right: 15px solid black;
    border-left: none;
    border-bottom: 15px solid transparent;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="grid"&gt;
  
    &lt;div class="content"&gt;
  
      &lt;div class="box" style="background:gray"&gt;
        DIV 1 (50% of column 1)
      &lt;/div&gt;
  
      &lt;div class="box arrow-left"&gt;
        DIV 2 (50% of column 1)
      &lt;/div&gt;
  
    &lt;/div&gt;
  
    &lt;div class="sidebar"&gt;
      &lt;div class="box100"&gt;DIV 3 (100% of column 2)&lt;/div&gt;
    &lt;/div&gt;
  
  &lt;/div&gt;
  
  
  
  &lt;div&gt;
  
    &lt;div class="content" style="background:tomato"&gt;
      &lt;p&gt;content 4 (100% of column 1 + GAP + 100% of column 2 )&lt;/p&gt;
    &lt;/div&gt;
  
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>