Loading…
8
Spent 6 hours fighting my dashboard layout last Saturday, turned out I just needed grid-template-areas
So last Saturday I sat down at like 9am with my coffee to build this analytics dashboard for a side project, and I had it all mapped out in my head. Cards on the left, a big chart on the right, a little stat bar on top. Easy stuff. Six hours later I'm on my third cup of coffee and my third full rewrite, because I kept trying to make flexbox do things it was never meant to do and every time I resized the window little gaps would appear between the cards. My girlfriend walked past at 3pm and asked if I was still doing the same thing I was doing at breakfast, and honestly yes, yes I was. Then I remembered grid-template-areas existed and drew the whole layout out as a literal text picture in my CSS in about 10 minutes, named each area, and it just worked on the first try with zero gap weirdness. I literally laughed out loud at my own screen at 3:30pm because I had wasted a whole Saturday morning on something a named grid map solved in one coffee sip. Has anyone else done the thing where you overcomplicate a layout for hours and then the simple grid solution makes you feel kinda dumb? Would love to hear what tricks you all reach for when a layout starts fighting back.
1 comments
Log in to join the discussion
Log In1 Comment
kellyj238d ago
Did you ever try forcing flexbox into a two column layout with a sidebar and just watch it fall apart the second someone opens it on a phone? I used to swear by flexbox for everything, like it was the only tool worth knowing, and I'd defend it anytime someone brought up grid. Then I did basically your exact Saturday, except mine was a settings page, and grid-template-areas let me name the header, sidebar, and main bits and place them in a few lines. Now I reach for grid first when the layout has actual regions, and flexbox only for lining up stuff in a single row or column. Felt a little silly looking back at all those nested divs I used to write.
5