Flex for lines, Grid for planes
Use Flexbox when content flows in one direction and you care about alignment, wrapping, and distributing space along that axis.
Use Grid when you need two-dimensional placement — dashboards, card galleries with aligned rows, and editorial layouts with named areas.
Fluid type without chaos
clamp(min, preferred, max) lets headings scale with the viewport. Pair it with a consistent type scale (1.2–1.333) so body and display sizes stay related.
Avoid fixing every breakpoint by hand. Design the extremes, then let fluid math fill the middle.
Common traps
Nesting Grid inside Flex is fine; fighting both for the same job is not. Prefer gap over margin hacks. Test overflow on small screens — min-width: 0 on flex children often saves you.
#css#layout#responsive