Loading…
29
Took me 2 years to stop using flexbox for page layouts, grid rows are the fix
I used to reach for flexbox for everything, headers, sidebars, footers, the whole page, and I always ended up with some weird spacing hack. Last month I rebuilt my portfolio site and forced myself to use grid for the main structure instead, and it finally clicked. The thing nobody told me early on is that grid-template-areas let me literally draw the layout in the CSS, so my header spans the top and my sidebar sits in its own named box without a single calc() or negative margin. What really got me was stacking breakpoints, I went from about 40 lines of flex tweaks down to maybe 12, just redrawing the areas for mobile. I also stopped fighting min-height on full page sections because grid handles the row sizing on its own. If you are still nesting flex containers three deep for a simple two column page, try areas first. Anyone got a trick for handling a sticky footer with grid areas without breaking the scroll?
1 comments
Log in to join the discussion
Log In1 Comment
grant.kevin9d ago
Spent probably six months of my life nesting flex containers like it was some kind of personal challenge, so I feel this in my bones. For the sticky footer with grid areas, I put the footer in its own named row and set grid-template-rows to auto 1fr auto, then the middle row eats up all the space on its own. Make sure the grid wrapper has min-height 100vh or dvh or it won't stretch right, and keep the scroll on the body not the grid container. That combo saved me from every weird margin hack I used to do.
5