An interface can pass a single viewport screenshot and still fail when a long case title arrives, a sidebar narrows, a translated label grows, or a user asks for less motion. CSS is a constraint system: intrinsic sizes, container width, cascade order, font metrics, and user preferences all participate. These lessons treat layout rules as product contracts that can be inspected and tested. The case-review interface is the running example, with narrow panels and variable content rather than one fixed mockup.
Topics in this track
- Grid, Flex, and Intrinsic Size Contracts — Use layout primitives according to the relationship between regions, then test long content and minimum sizes.
- Container Queries for Reusable Panels — Adapt a panel to its own space instead of assuming the viewport predicts its width.
- Cascade Layers and Design Token Ownership — Make style precedence explicit and separate shared decisions from component exceptions.
- Font Loading and Motion Fallbacks — Keep text usable during font loading and preserve meaning when animation is reduced.
Prerequisite paths
Responsive interaction: preserve content and control order; Reflow, Zoom, and Motion Preferences; Component Boundaries and State Ownership.
Neighbor track
Browser Execution and Resource Lifecycle.
Practice path
Build Project: adaptive review interface and check decisions in Web Development: layout and runtime contracts quiz.
Further connections
Overlays, Scroll, and Mobile Viewport; Stacking Context, Top Layer, and Overlay Contract.
Further connections
Motion and View Change Contracts; CSS Motion State and Interruption.