A 3 month CSS grid refactor that cut my layout code in half

I was working on a client dashboard last fall with 12 different card layouts. Original version used flexbox with float fallbacks, about 400 lines of CSS per page. After sitting down for a weekend and rebuilding everything with CSS Grid and named template areas, the same layouts now take around 180 lines total. The trick was mapping out the grid areas in a way that reused the same template for similar card sizes. Has anyone else had a big before/after moment like this with a specific CSS technique?

2 comments

2 Comments

lucaslane13d ago

Those 400 lines of flexbox don't sound right at all.

stellag2113d ago

Push back a little here - 400 lines might be excessive but flexbox setups for complex layouts with weird breakpoints and nested grids can absolutely blow up fast if you're being thorough. I've had projects where I ended up with tons of utility classes for edge cases that added up way quicker than you'd think. It's not always bad code, sometimes the design just needs that many rules to look right across everything.