Ouch, I’ve definitely been in that 3-hour-stare-down before!
I feel your pain—CSS Grid is amazing until it suddenly isn't. If your footer is jumping up and covering your content on mobile, it’s almost always because the container is being forced to stay at the height of the screen, even when the content wants to be much taller. On desktop, your content probably fits in one screen, but on mobile, that same text stacks and gets longer, but the grid container isn't growing with it.
Here are a few things I’d check first to get that fixed:
- Swap height for min-height: This is the most common culprit. Check if your main wrapper or body has height: 100vh. If it does, the grid is locked to the viewport size and won't expand when the content gets long. Change that to min-height: 100vh instead. This tells the browser "be at least as tall as the screen, but feel free to grow if the content needs more room."
- Check your grid-template-rows: If you’re using something like grid-template-rows: 80px 1fr 80px, the "1fr" part should theoretically handle it. However, if the parent container has a fixed height, that 1fr becomes 1 fraction of a fixed (and too small) space. Making the parent height flexible usually fixes this instantly.
- The Mobile Browser Bar: Mobile browsers (like Safari on iPhone) have that pesky address bar that pops in and out. Sometimes using 100dvh (dynamic viewport height) instead of 100vh can help with weird overlapping issues, though the min-height trick usually does the heavy lifting.
- Grid Auto Rows: If you haven't explicitly defined your rows for mobile in a media query, try setting your content area to height: auto or using grid-template-rows: auto 1fr auto.
Try the min-height fix first! It’s saved my sanity more times than I can count. Usually, once the container is allowed to grow past the bottom of the screen, the footer will naturally sit right where it belongs at the very end of the page. Let me know if that works for you!