Grid vs Flexbox for dashboard layouts - my test was eye opening

Built the same admin dashboard two ways last month. Flexbox version took me 3 days of fighting alignment. Grid version finished in 4 hours. Not even close. Grid handles the gaps and the column sizing way better when you have mixed content heights. Anyone else find a specific use case where grid just crushed flex?

2 comments

2 Comments

lily_sullivan828d ago

Whoa, I gotta respectfully disagree here. I think flexbox gets a bad rap for stuff like this. Most dashboard layouts I've built work fine with flex if you use flex-wrap and set consistent min-widths on the cards. Grid definitely handles the column sizing in one line, sure, but I've found it gets real rigid real fast when you need to swap things around or add a new widget later. Flexbox lets me just add another box and it flows naturally, which saves me time in the long run even if day one takes longer.

the_ben8d ago

Is no one gonna talk about how media queries play into this? In my experience, the real headache with flexbox dashboards isn't day one layout, it's when you gotta stack everything on a phone screen. I've had cards get real squished looking because flex-wrap just keeps trying to line them up until there's no room left. Grid handles that breakpoint cleaner with one media query change on the column template, you ask me. Flexbox means I'm usually writing extra max-width rules or hiding stuff to make it look right on small screens. Your mileage may vary, but that's been the trade-off I keep hitting.