I keep seeing people forget about grid-auto-flow when they have weird gaps

Back when we were all hacking with floats, a missing clearfix would break a whole layout. Now, I see folks set up a perfect grid but then get confused when extra items don't fill it right, because they leave grid-auto-flow as the default 'row'. Setting it to 'dense' on a project last week packed those leftover boxes in neatly. What's a simple grid property you think gets overlooked too often?

3 comments

3 Comments

milam421mo agoMost Upvoted

Okay, the part about grid-auto-flow defaulting to 'row' is right, but saying to set it to 'dense' as a fix is kind of a band-aid. That packing can mess up your visual order if you're not careful. People skip over `grid-auto-rows` and `grid-auto-columns` way more. If you don't set those, your auto-placed items can be a random size and wreck the layout. It's like building the main grid but forgetting to plan for the overflow.

river1831mo ago

You know, I always thought the main grid properties were the big deal. But you're totally right about forgetting to plan for the overflow. I never used to touch grid-auto-rows and it caused so many weird layout breaks for me. I'd get the defined rows perfect and then the extra stuff would just be huge. It's such a simple fix but so easy to miss. I'm going to pay way more attention to those auto properties from now on.

robinl9015d ago

See @milam42, I get the warning about dense being messy, but I've found it works fine if you're careful with the source order. It saves a ton of time when you have odd-sized cards that need to fill gaps. Respect the concern though, you gotta test it first.