CSS Layout Systems
Modern layout techniques that power every production UI. Flexbox for one-dimensional flow, Grid for two-dimensional layout, responsive design, and container queries.
The main axis vs cross axis mental model, flex-grow/shrink/basis mechanics, alignment properties, and the flex shorthand that every production layout depends on.
The holy grail layout, sticky footer, equal-height cards, the last-row alignment problem, and the flexbox gotchas that trip up even experienced developers.
The grid template model, the fr unit and how it distributes space, auto-fill vs auto-fit for responsive grids without media queries, gap, and grid item placement.
Named grid areas for readable layouts, subgrid for nested alignment, overlapping grid items, and building fully responsive layouts without a single media query.
Mobile-first strategy, choosing breakpoints based on content not devices, fluid design with clamp(), when media queries are still necessary, and the responsive design decision framework.
@container and container-type: component-level responsiveness that responds to the component's own size, not the viewport. The paradigm shift for reusable components.
How sticky scroll actually works, the seven reasons sticky positioning fails, fixed viewport issues on mobile, and the containing block traps that break both.
dvh vs svh vs lvh and why vh is broken on mobile, building a fluid type scale with clamp(), and the math behind viewport-relative sizing.
Inline vs block direction, margin-inline vs margin-left, and building layouts that work in any writing direction — LTR, RTL, vertical. The foundation for true internationalization.
8 'which layout tool for this design?' scenarios. Test your ability to choose between flexbox and grid based on the layout requirements.