I finally got my CSS grid to work after 4 hours of frustration

I was trying to make a simple photo gallery layout for my personal site and kept getting weird gaps and overlapping elements. Then I realized I had forgotten to set the grid-template-columns property properly and was just using auto by mistake. Has anyone else tripped over something obvious like this for way too long before spotting it?

2 comments

2 Comments

schmidt.eva21d ago

Four hours though? I actually think spending that long on a CSS grid problem might mean you were overcomplicating it from the start (which I've definitely done too, no judgement). Setting grid-template-columns with auto isn't exactly a crazy mistake, it's more like the browser was trying to figure out what you wanted and guessing wrong. I usually just write out explicit column sizes from the beginning like "1fr 1fr 1fr" or whatever fits the layout, then adjust if needed. The weird gaps thing can also happen if you've got margin or padding on the grid items themselves, which messes with the fractional units.

adams.harper21d ago

Who hasn't spent a whole afternoon fighting a CSS grid that was winning?