Hi all,
My masonary grid, which is supposed to have 3 columns, only displays 2 when viewed in safari. It looks completely fine in chrome. I tried playing with margins and width/height but nothing seems to work.
Chrome:
Safari:
Here is my site Read-Only: LINK
(how to share your site Read-Only link)
Hi there,
Browser compatibility issues with Grid layouts can occur between Safari and Chrome. Here are some common solutions to ensure consistent display across browsers:
The Grid 2.0 system in Webflow is designed to work consistently across modern browsers. To maintain layout consistency, ensure you’re using explicit grid settings rather than relying on auto-placement, and double-check that your grid-gap settings are properly defined. You can also use the browser preview feature in Webflow to test your layout in different browsers before publishing.
For responsive designs, make sure to set appropriate breakpoints and verify that your grid maintains its structure across different screen sizes. The Layout panel in Webflow provides all the necessary controls to fine-tune your grid settings for optimal cross-browser compatibility.
Hopefully this helps! If you still need assistance, please reply here so somebody from the community can help.
