3 replies · 792 views
I'm laying out a one-pager with a narrow left sidebar (contact details) and a wide main column (experience). I started with two flex children at 30%/70% but the gutter keeps collapsing when the sidebar text is short. Is grid the better tool here, and how do I pin the column widths so they don't shift as content changes?
Yes, reach for grid for this. Select the wrapper, set display to grid, and give it two explicit tracks. I use something like grid-template-columns: 220px 1fr so the sidebar is fixed and the main column takes the rest. Set a column gap on the wrapper instead of margins on the children, so the gutter is stable no matter how short the sidebar gets.
The reason flex was drifting is that 30/70 is a share of a flex line that also has to honor content, so a short sidebar lets the basis win and the gap moves. Fixed track + 1fr sidesteps that entirely. Turn on the layout overlay (the DevTools-style boxes) and you'll see the two tracks hold their width.