Why is CSS Grid row height different in Safari?

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

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!