💬 Grid or Flexbox, how I decide now

For a long time I used Flexbox for every layout I built, and every time the page got a bit complicated I ended up with flex boxes inside flex boxes. Then a project had rows that refused to line up with each other. Each row was sizing itself and had no idea what the row above was doing. I rebuilt the page skeleton with Grid and the whole problem disappeared. Here is how I decide now. Flexbox is for one direction, a row or a column. A navbar with a logo on the left, a card with an icon next to some text, a line of buttons spaced evenly. Grid is for rows and columns together, like a page with a header, sidebar, main area and footer, or a photo gallery that has to line up both ways. My rule of thumb is that if I am nesting flexbox more than two levels deep, I should have used Grid at the top. They also work well together. Grid for the page skeleton, Flexbox inside each area for the small stuff. One tip for beginners. Open the browser DevTools, click the small grid or flex badge next to the element, and it draws the lines on the page. You can see why something is not aligning. If you are stuck on a layout, post a screenshot and I will say which one I would reach for.

This cleared up something for me. I used Flexbox for my whole page layout for a year. Every time I added a row, the columns in different rows stopped lining up.