Hit exactly 12 columns on a dashboard layout and everything finally snapped into place

Been fighting with a client dashboard for weeks where data cards would wrap weird and then I set up a 12 column grid with span fractions and suddenly every widget sized itself perfectly without a single media query break... anyone else found that 12 columns is some kind of magic sweet spot for complex layouts?

2 comments

2 Comments

nathanking3d ago

Actually I think there's a small thing people trip up on here. Twelve columns works great when you commit to explicit spans instead of mixing in auto columns because flex grow will fight your grid and cause wrapping issues again. Pure fractional spans based on 12 let the browser do the math cleanly every time.

paigewood3d ago

Oh nice, 12 columns does hit different for sure. It's like the grid system finally does what you wanted all along once you commit to it fully. So were you using fixed fractions like 4/8 or 6/6, or did you mix in some auto-sizing columns for the variable width widgets? I always struggle with deciding between explicit spans and letting flex grow take over.