Picked grid over flexbox for a dashboard rebuild and it paid off big time

Last month I had to rebuild a client's admin dashboard in Chicago. I was stuck between using CSS Grid or Flexbox for the main layout. I went with Grid because I needed strict column alignment with a sidebar, header, and content area that all had to stay put. The result was way cleaner than my old Flexbox hacks with margins and wrappers. Took me about 3 hours to get the template locked in versus probably double that with Flexbox. Client said it felt more organized and asked if I changed the framework or something. Anyone else had a project where Grid just made more sense than Flexbox?

3 comments

3 Comments

avery3662d ago

Glad it worked out but Grid isn't really a replacement for Flexbox, they handle different things. Grid is for 2D layouts while Flexbox is better for one-directional stuff.

grant.kevin2d ago

Yeah, because clearly nobody's ever made a row of cards with Grid before.

michaelcoleman2d ago

Avery, I got your point but here’s where I disagree a bit. I’ve spent hours on both tools building about 50 different page layouts over the last few years. Grid can totally handle one-dimensional stuff just fine (like a single row of cards), it just gives you more control over the rows and columns at the same time. Once you get used to Grid’s shorthand and the gap property, Flexbox starts feeling like more work for most layouts I do. I’m not saying Flexbox is useless, I use it for things like centering a button inside a div or wrapping a few nav links. But for the common stuff like a blog layout or a dashboard, Grid handles it cleaner and with less code in my experience. So yeah, they overlap more than people give them credit for, especially now that subgrid is a thing.