Figma dev mode guy convinced me CSS grid was dead wrong for my layout

Last week a dev from a code meetup told me to ditch CSS grid entirely and just use flexbox with negative margins for a dashboard I was building. Spent 5 hours fighting alignment issues before I swapped back to a simple 2x3 grid that worked instantly. Anybody run into someone pushing a framework or method that just doesnt fit the problem?

3 comments

3 Comments

kim.hannah9h ago

That 2x3 grid you mentioned is the exact kind of layout where grid shines. I had a similar situation last year building a stats dashboard for a small nonprofit. Some guy from a React meetup kept insisting I use styled-components with inline flex for everything. I spent two hours trying to make five uneven card blocks line up in two rows with flex-wrap and min-widths. It kept breaking on tablet sizes where three cards would fit on one row and two on the next but the gap logic got all weird. Switched to a simple 2-column grid with grid-auto-rows and it sorted itself in ten minutes. Flexbox is great for nav bars and single row things but for actual grid-like layouts just use grid.

miles_jackson911h ago

Does he actually build layouts for a living? Sounds like someone who learned one trick and thinks it fits everything.

vera_roberts9h ago

But did you actually try his approach with a proper wrapper and breakpoints? I mean negative margins are super hacky yeah but flexbox can handle dashboards if you set the flex-basis right and use gap instead of margin hacks. Sometimes these design system people are onto something even when they're being annoying about it... grid is still heavy for responsive stuff if you're not careful with the template areas.