-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?

2 comments

2 Comments

miles_roberts224d ago

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

patricia_wright4d 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.