I finally stopped fighting with grid-auto-flow

I used to set it to row every time without thinking. Letting it default to column in some cases actually fixed my overlapping items.

3 comments

3 Comments

spencerr821mo ago

Yeah what was the specific layout where the default column behavior worked better for you? I used to force row every single time too lol, and then I ran into a situation where I had a bunch of differently sized items and column just magically packed them in without gaps. It's so easy to forget the default is actually smart sometimes. Now I always check what the default does before I override it.

spencerr821mo ago

That point about column packing differently sized items without gaps really hits home. I was working on a gallery with pictures of all different shapes and column sorted them out way better than my forced rows ever did. Now I make myself look at the default layout for a minute before changing anything (it's crazy how often it already does what you need). You save yourself from adding a bunch of extra CSS just to clean up the mess. Starting with the default is like getting free layout work done for you. It turns a headache into a simple fix most of the time.

tessa9221mo ago

Actually had that same moment with a client's photo gallery last month. They had a mix of portrait and landscape shots, and the default column flow stacked them in a way that felt balanced without any extra code. @spencerr82 is right about checking the default first. It's like the browser already solved the puzzle for you, especially with uneven content. I wasted a whole afternoon once trying to force a grid before realizing the simple column layout already looked perfect.