Grid vs Flexbox: choose by behavior, not habit
Use the layout model that matches the relationship between items, then combine Grid and Flexbox where each one owns a clear job.
Field Guide
Field Guide
Deep explanations of CSS mechanics, tradeoffs, and production behavior.
Use this track when you need to understand the browser behavior behind a layout decision: sizing, alignment, cascade, responsive boundaries, motion, and the tradeoffs that make CSS durable in production.
Start with Grid vs Flexbox when the layout primitive is unclear, Intrinsic sizing when content refuses to shrink, and Cascade layers when overrides are becoming harder to explain.
Container queries: responsive components without viewport guesses
Container queries let a component respond to the space it actually has, which is often more useful than the viewport width.
Subgrid: align nested content without copying track math
Subgrid is most useful when nested children need to inherit the alignment contract of a parent grid.
Intrinsic sizing: the CSS rules behind mysterious overflow
Many layout bugs are intrinsic sizing bugs wearing a responsive design costume.
Alignment in CSS: separate item alignment from track distribution
CSS alignment gets easier when you separate aligning items from distributing leftover space.
Cascade layers: lower specificity without losing control
Cascade layers let teams control order explicitly so components do not need to win by becoming more specific.
Custom properties: make design decisions visible in CSS
Custom properties are most valuable when they expose the decisions a component allows callers to change.
Logical properties: write layout rules by meaning, not direction
Logical properties make CSS describe inline and block flow instead of hard-coding left, right, top, and bottom.
Fluid spacing without breakpoint sprawl
Responsive spacing should protect relationships between elements, not just grow because the viewport got wider.
Sticky positioning: why it fails and how to design around it
Sticky positioning works when the element has a scroll container, a threshold, and enough room to move.
Stateful UI with :has() without turning CSS into business logic
The :has() selector is powerful when it reflects document state, not hidden application rules.
CSS animation performance: move pixels without moving layout
The safest UI animations change transform and opacity, but production motion also needs layout, accessibility, and timing discipline.