CSS Grid not display correctly in Safari

I have a couple of CSS Grid elements and they display perfectly in Chrome and Firefox, however when in Safari they are all messed up. I have tried some of the solutions shown in other posts but nothing has worked. The grid is also not working right in Safari on iPad but is fine on iPhone. What’s up with THAT?


Here is my site Read-Only: **[https://preview.webflow.com/preview/kelly-hoopers-website?utm_medium=preview_link&utm_source=designer&utm_content=kelly-hoopers-website&preview=de6225062126e07a94a005cb2d8a3aa8&pageId=608709fce1d822a9235430e9&mode=preview

CSS grid is not fully supported by all browsers. What version of Safari are you using? This page shows which browsers support CSS grid and which browser versions do not support CSS grid. Also, if you look at the known issues tab on the “Can I Use” page it says “Safari does not yet support intrinsic and extrinsic sizing with grid properties such as `grid-template-rows’”.

hi @freedj I have looked on your issue and your problem is with settings of container 12 and grid images height. All you have to do is to set container 12 to block and images height to auto. Here is a short video how to do that.

https://cln.sh/7e5RdN

1 Like

AMAZING! Thank you!!

1 Like

I have this problem too but can’t seem to work out how to fix it. On the homepage I have a testimonial section which breaks on Safari, also using a grid. Can anyone help?

Read only link: https://preview.webflow.com/preview/earthfound?utm_medium=preview_link&utm_source=designer&utm_content=earthfound&preview=610dcbf4d7d396411512e3b3cd157507&workflow=preview

I also had a problem with a grid in Apple Safari and found out it had to do with: Grid > Distribute.
I changed this to: Grid > Distribute > Content Start and now it is displayed properly.

Maybe you can do something with it.