CSS Layout Foundations: Flexbox and Grid

Description

Build CSS layouts with Flexbox and Grid - the Flexbox model (main vs cross axis, justify-content, align-items, flex-wrap, the flex grow/shrink/basis shorthand, gap), Flexbox recipes (centering, navbars, pinned card footers, equal-height columns, sticky footers), the Grid model (fr units, repeat, auto-fill vs auto-fit, minmax, line and named-area placement), Grid recipes (responsive card grids without media queries, holy grail, overlapping layers), choosing Flexbox vs Grid, common layout bugs, and fluid type with clamp(). Use whenever the user lays out a page or component, asks how to center something, uses display flex or grid, has items overflowing, stretching or not wrapping, builds a responsive card grid, or asks Flexbox vs Grid.