Styjun

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>

(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.

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