Why is CSS Grid row height different in Safari?

Question

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 1fr so that it is proportional to the height of the grid. Some grid items have a grid-row: span 2 or grid-row: span 3.

The grid element is absolutely positioned inside of wrapper with padding on it in order to maintain the aspect ratio.

This has all worked perfectly in Chrome and Firefox and even in IE with the help of the -ms- prefix.

In Safari, it's a different story:

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?

Removing position absolute from the grid element doesn't change the row height. But it seems that putting height: 0 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?

Code:

Codepen: https://codepen.io/katrina-isabelle/pen/rRqvXq

.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;
}

<div class="grid-wrapper">
  <div class="grid">
    <div class="grid-item grid-item--1">
      Grid item
    </div>
    <div class="grid-item grid-item--2">
      Grid item
    </div>
    <div class="grid-item grid-item--3">
      Grid item
    </div>
    <div class="grid-item grid-item--4">
      Grid item
    </div>
    <div class="grid-item grid-item--5">
      Grid item
    </div>
    <div class="grid-item grid-item--6">
      Grid item
    </div>
    <div class="grid-item grid-item--7">
      Grid item
    </div>
    <div class="grid-item grid-item--8">
      Grid item
    </div>
    <div class="grid-item grid-item--9">
      Grid item
    </div>
  </div>
</div>

Answer 1

I've been having a similar issue in Safari 12+, as I was also using padding to force aspect ratios in a grid based layout. I'm not sure if this is exact same problem you were having, but the fix below works for me on your pen in Safari.

TLDR: Put display:grid on the div surrounding your grid container. Here it is in action: https://codepen.io/harrison-rood/pen/rNxXWPb

After tearing my hair out for hours on this, I decided to try placing display:grid on the wrapper around my main grid, and it worked perfectly! I have no idea why this would fix it, but my guess would be that it gives Safari some more context on the parent container and that allows height:100% to refer to the grid context instead of the parent, similar to how Chrome and Firefox handle this by default. This was so frustrating to me that I felt obligated to create a SO account just so I could post this! Hope it helps!

Answer 2

Instead of height: 100% on the grid container (.grid), use height: 100vh.

Or, if you really want to use percentages, then make sure the parent has a defined height. Some browsers still adhere to an old rule about percentage heights, namely:

An element with a percentage height must have a parent with a defined height as a reference point or the percentage height will be ignored.

More details here:

• Working with the CSS height property and percentage values
• Chrome / Safari not filling 100% height of flex parent

Answer 3

(Posting as an answer in order to include pictures.) I'm getting these results with Safari and Chrome (Vivaldi), after following your suggested fix with setting height: 0. As you say, this expands the height of the divs from a nearly collapsed state in Safari.

I'm wondering: Is it the solution on the left you are aiming for, or should it be like on the right? If the alternative on the left is your goal you could get the same results with setting grid-auto-rows: auto on .grid. I guess in both cases (the height: 0 and grid-auto-rows: auto) you are somehow effectively escaping calculation of height as fractions of the .grid-wrappers height.

I can't say why Safari does this in such a different way, but - pragmatically - I would personally consider using grid areas instead of spans to place the elements - at least if the layout is fairly given.