-1

I got my photo grid to line up perfectly by using grid-auto-flow: dense

I was building a gallery for a friend's art show in Seattle and had a bunch of photos with different heights. They kept leaving weird empty gaps in the layout, which looked messy. After messing with flexbox for an hour, I found a CSS Grid property called grid-auto-flow. Setting it to 'dense' was the fix. It tells the browser to fill in those holes with the next item that fits, even if it's out of order in the HTML. My gallery went from looking broken to a tight, packed mosaic in about five minutes. I had no idea this option even existed until last week. Has anyone else used this for a masonry style layout without needing extra JavaScript?

3 comments

3 Comments

miles_roberts222mo ago

grid-auto-flow: dense" is one of those things I thought would break stuff, but it actually works.

patricia_wright2mo ago

Explain what you were trying to fix with it, @miles_roberts22. I've only used dense packing for simple image grids (you know, to fill the gaps). It feels like one of those features that's either perfect or a total headache.

webb.stella7d ago

Gotta disagree a bit here. Dense packing has burned me more times than it helped. I tried it on a photo grid for a client's portfolio and it ended up shuffling the order of their work so badly that the final image in the HTML landed right at the top. Looked chaotic. Also broke my keyboard navigation because tab order was all over the place. It works fine if you don't care about the sequence of your items at all, but for anything with a narrative flow it's a mess in my experience.