title: Why is CSS Grid row height different in Safari?
body: <p>I have used CSS Grid to lay out a difficult grid layout where grid items have varying heights and widths. The height of the grid rows is set to <code>1fr</code> so that it is proportional to the height of the grid. Some grid items have a <code>grid-row: span 2</code> or <code>grid-row: span 3</code>.</p>
  
  <p>The grid element is absolutely positioned inside of wrapper with padding on it in order to maintain the aspect ratio.</p>
  
  <p>This has all worked perfectly in Chrome and Firefox and even in IE with the help of the -ms- prefix.</p>
  
  <p><strong>In Safari, it's a different story:</strong></p>
  
  <p>However, in Safari the grid row does not seem to be calculated the same way — the height of the rows is much, much shorter in Safari than any other browser, which ruins the layout. Why is this?</p>
  
  <p>Removing position absolute from the grid element doesn't change the row height. But  it seems that putting <code>height: 0</code> on the grid wrapper does something that makes the row height behave the same in Safari as it does in Chrome and Firefox. What's the reason behind this?</p>
  
  <p><strong>Code:</strong></p>
  
  <p>Codepen: <a href="https://codepen.io/katrina-isabelle/pen/rRqvXq" rel="noreferrer">https://codepen.io/katrina-isabelle/pen/rRqvXq</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-wrapper {
    position: relative;
    padding-bottom: 60%;
  }
  
  .grid {
    display: grid;
    grid-gap: 2px;
    grid-template-columns: 29% 21% 21% 29%;
    grid-auto-rows: 1fr;
    position: absolute;
    width: 100%;
    height: 100%;
  }
  
  .grid-item {
    width: 100%;
    color: #ccc;
    background: #ccc;
  }
  .grid-item--1 {
    grid-row: span 2;
  }
  .grid-item--2 {
    grid-row: span 3;
  }
  .grid-item--3 {
    grid-row: span 2;
  }
  .grid-item--4 {
    grid-row: span 3;
  }
  .grid-item--5 {
    grid-row: span 2;
  }
  .grid-item--6 {
    grid-row: span 3;
  }
  .grid-item--7 {
    grid-row: span 2;
  }
  .grid-item--8 {
    grid-row: span 2;
  }
  .grid-item--9 {
    grid-row: span 1;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="grid-wrapper"&gt;
    &lt;div class="grid"&gt;
      &lt;div class="grid-item grid-item--1"&gt;
        Grid item
      &lt;/div&gt;
      &lt;div class="grid-item grid-item--2"&gt;
        Grid item
      &lt;/div&gt;
      &lt;div class="grid-item grid-item--3"&gt;
        Grid item
      &lt;/div&gt;
      &lt;div class="grid-item grid-item--4"&gt;
        Grid item
      &lt;/div&gt;
      &lt;div class="grid-item grid-item--5"&gt;
        Grid item
      &lt;/div&gt;
      &lt;div class="grid-item grid-item--6"&gt;
        Grid item
      &lt;/div&gt;
      &lt;div class="grid-item grid-item--7"&gt;
        Grid item
      &lt;/div&gt;
      &lt;div class="grid-item grid-item--8"&gt;
        Grid item
      &lt;/div&gt;
      &lt;div class="grid-item grid-item--9"&gt;
        Grid item
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>