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>
