Just realized CSS Grid beats Flexbox HANDS DOWN for card layouts

I spent like 3 hours last week fighting with Flexbox to make a gallery of 20 product cards line up perfectly. No matter what I did, the last row ALWAYS looked wonky with different sized gaps. Then I swapped to CSS Grid with `grid-template-columns: repeat(auto-fill, minmax(250px, 1fr))` and it fixed EVERYTHING in like 10 minutes. The rows actually align and the cards stretch evenly without me guessing margins. Has anyone else had that moment where you stubbornly stick with one method way too long?

2 comments

2 Comments

ray2107d ago

I mean flexbox still has its place for simpler stuff though.

faithrodriguez6d ago

Gotta agree with you there, it's like me trying to build a deck with just a hammer - yeah it works for the simple stuff but once you get into the weeds you're gonna need more tools. Flexbox is my go-to for lining up nav items or centering a button, no shame in keeping it simple.