Pro tip: I was building a dashboard layout for a client in Austin and my grid items kept jumping around on mobile.

I had set up a perfect 4-column grid on desktop, but when I checked it on my phone, the last two items were stacking in a weird order. I spent an hour trying to fix it with media queries. Turns out I had used `grid-auto-flow: dense` without realizing it was reordering things to fill gaps. I removed it and used explicit `grid-row` placements instead, which fixed the flow. Has anyone else had a mobile layout get messed up by auto-flow?

2 comments

2 Comments

keith_henderson3d ago

Wait, is dense flow really that bad? It's just filling gaps, seems fine for most things.

ericjackson2d ago

Yeah, dense flow can really mess with the reading order for screen readers or keyboard nav. It's fine for a pure visual gallery, but for any content with a logical flow, you're better off manually placing items. I always check the tab order in dev tools now after getting burned once.