I finally chose between flexbox and grid for a simple card layout

Had to pick between flexbox and CSS grid for a client's product cards. Went with grid because they had 4 columns on desktop. 3 hours later I was fighting with gaps on mobile. Should have just used flexbox. Anyone else regret a CSS choice mid-project?

2 comments

2 Comments

fiona_nelson513d ago

My last project had 6 product cards per row on desktop and I went grid too. 3 days in I realized the gap property was fighting with my padding on mobile and I had to rewrite everything with negative margins. Flexbox handles wrapping way better when you don't know the exact content height. Grid is overkill for simple cards unless you're doing a magazine layout with spanning columns.

simon_chen3d ago

oh man @fiona_nelson51 that gap and padding fight is the worst. i feel like i've been there way too many times where i think i have it all figured out and then mobile breaks everything. flexbox really does feel safer for that kind of stuff, just lets things breathe without fighting you.