Ugh, the Safari struggle is real.
I feel your pain! I’ve spent way too many late nights staring at a screen trying to figure out why Safari behaves so differently from Chrome. The biggest thing to remember is that Chrome DevTools only simulates the screen size; it doesn’t actually run the WebKit engine that iPhones use. That's why everything looks "perfect" until you open the actual device.
Before you pull all your hair out, here are a few things that usually fix this specific overlapping/collapsing issue on mobile Safari:
1. The "min-width: 0" trick
This is probably the #1 culprit. By default, grid items have a min-width of auto. On Safari, if you have a long URL, a large image, or a piece of code inside a grid cell, Safari won't let that cell shrink smaller than its content, which causes the overlap you’re seeing. Try adding min-width: 0; (and sometimes min-height: 0;) to the direct children of your grid container. It forces the browser to follow your grid tracks instead of the content's size.
2. Avoid "1fr" for rows on mobile
I’ve noticed Safari gets really weird with grid-template-rows: 1fr; if the parent container doesn't have a very specific height defined. If your layout is collapsing, try changing your row heights to auto or a specific px/rem value for the mobile media query. It’s less "elegant" than fractional units, but it’s much more stable on iOS.
3. Double-check your Viewport Meta Tag
It sounds basic, but I’ve seen this break so many layouts. Make sure your HTML <head> includes this exactly:
<meta name="viewport" content="width=device-width, initial-scale=1">
Without the initial-scale=1, Safari sometimes tries to "help" by zooming out or rendering the desktop width and scaling it down, which makes CSS Grid go haywire.
4. Percentage gaps vs. Fixed gaps
Are you using percentages for your gap or column-gap? Safari has historically been buggy with percentage-based gaps in grids. Stick to px, em, or rem for your gaps. It's a small change, but it fixed a "shuffling" column issue for me on a project last month.
5. Flexbox fallback for very old iOS
If you're supporting really old iPhones, keep in mind that Grid support was a bit spotty before iOS 10.3/11. But if you’re on a modern device, it’s likely one of the sizing issues above. Try the min-width: 0; fix first—it’s a lifesaver 90% of the time.
Let me know if that works! If it’s still acting up, post a snippet of your CSS and I’ll take a look. We'll get it figured out!