Loading…
11
Grid layout beat my flexbox setup on 14 nested divs and I'm not going back
I spent two evenings last week rebuilding a fake cassette tape in pure CSS for my profile page, and the first pass used flexbox for everything. It looked fine at 800px wide, then I shrank the window and watched the tape reels squash into ovals while the label text slid off the shell. I switched the whole thing to grid with a few fr units and clamp() on the font sizes, and it held its shape from 280px all the way out to 1400px with zero media queries. What really sold me is that grid let me stack the label, the reels, and the little screw holes in the same cell and just nudge them with align-self, so the DOM went from 14 nested divs down to 9. Flexbox still wins for a single row of buttons, but the second anything needs to sit in two directions at once, grid is the move and I am done fighting it. If you have never built a picture where the layers actually overlap in one cell, try a grid template first and see how much less code you write. Anyone else ditch flexbox for their whole art piece, or do you still mix both?
0 comments
Log in to join the discussion
Log In0 Comments
No comments yet
Be the first to share your thoughts on this discussion.