My CSS grid just broke after 2 hours of tweaking margins

I spent all Saturday on a simple landing page layout and my grid columns decided to stack on top of each other for no reason. I had no media queries set, just a basic three-column setup in Flexbox and it fell apart when I added a single paragraph. How do you even practice CSS without wanting to throw your laptop at the wall?

3 comments

3 Comments

max4157d ago

Same thing happened to me last week? Spent three hours on a product grid. Three columns. Perfect spacing. Then I added one image with a long alt text and the whole thing collapsed like a bad ladder. @ellis.mia nailed it though. The mixup between Flexbox and Grid is a killer. I've been wrestling with CSS for years and still get caught. One wrong property and your layout just gives up. Try using min-width on your columns next time. Saved me from throwing my keyboard through the window more times than I can count.

ellis.mia7d ago

You said Flexbox but that's actually CSS Grid with a different set of rules.

jamesfox3d ago

but hold on @ellis.mia, flexbox can actually handle grids just fine if you set flex-wrap to wrap and give items a fixed basis. its not as clean as grid for 2d layouts but it gets the job done for stuff like a simple product row. i've been using flex for everything since 2016 and never had a grid-only problem that flex couldnt solve with a bit of hackery.