Stefan Feser

Front-end Developer

I am a freelance front-end developer based in Stuttgart, Germany. I love traveling and working remotely, photography and surfing. I'm also a lecturer at SAE Institute.

Follow me on Twitter, Instagram or GitHub

CSS grid-column-gap with percentage value in Safari

Today I stumpled over a problem in current Safari (DesktopĀ 10.1.2 and iOS 10.3.3) and the new CSS grid property grid-column-gap.
So I thought I write a quick blog post about it, in case of anyone having the same problem.


By the time of writing Safari does not support grid-column-gap with percentage values


grid-column-gap: 10%;


To fix that you could either set a pixel value as fallback

grid-column-gap: 10px; grid-column-gap: 10%; 


or just use an em value instead

grid-column-gap: 10em; 


Here you can find more information about grid-column-gap:

Update 20.09.2017

After updating iOS to 11.0, Safari now supports percentage values for grid-column-gap. Safari Desktop (macOS) still does not support it.