**Issue: CSS Grid layout collapsing on mobile — need help debugging.**

My grid-template-columns works fine on desktop but collapses to a single column with overlapping elements when I resize below 768px. The browser inspector shows the grid container is still applying columns, but the items aren't spacing correctly — it looks like they're all stacking into the first cell instead of wrapping.

I've tried:

• grid-template-columns: repeat(auto-fill, minmax(...))
• Adding a media query to override column counts
• Checking for overflow hidden on parent elements (none found)

Has anyone seen this before? Any specific CSS property I might have overlooked that would cause grid items to render within the same cell rather than flow normally? Thanks in advance!

Check your grid-template-columns definition. If you're using a fixed pixel value instead of fr or minmax, Grid will just render what you gave it — which on mobile means an overflow that looks like "collapse" to someone who doesn't know how

This is one of those issues that sounds simple and then turns into a rabbit hole about spec compliance, browser engines, and implicit grid behavior. Let me try to systematize this because there are at least four distinct failure modes for what you're describing as "collapsing," and the fix depends entirely on which one you've actually got.

Failure mode A: The container has display: grid but no explicit template columns/rows defined, and your children don't have auto-placement hints that make sense at narrow widths. In this scenario, Grid uses its minmax implicit placement algorithm — it packs items into tracks by default using the minimum content size of each child for auto-generated tracks. On desktop you might have six wide cards in one row because their combined width fits below 1024px; on mobile those same cards are still trying to pack onto a single line and they're either overflowing container boundaries or forcing the browser to create an absurd number of rows that don't align with what your design intended. The fix is explicit column definition: grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); this tells Grid to fit as many columns of at least 320px wide into the container as possible and fill remaining space evenly. On a 480px screen it renders two columns; on 640px three, etc., with zero media query bloat.

Failure mode B: You're using grid-template-areas with named rows/columns that don't have mobile overrides in your @media block. Named area templates are brittle because the browser has no fallback — if you define grid-template-areas: "header header" "main side"; and a 320px screen doesn't give you enough room for the named sidebar, Grid can't just drop that cell; it tries