css

CSS Grid is a two-dimensional layout system for rows AND columns simultaneously, while Flexbox is one-dimensional (row OR column). Grid excels at page-level layouts and complex grids; Flexbox is better for component-level alignment and distribution within a single axis.

Transitions animate between two states when a property changes (e.g., on hover), requiring a trigger. Animations use @keyframes to define multi-step sequences that can run automatically, loop infinitely, and control timing at each step independently.

CSS custom properties (--my-var) are native CSS variables that cascade, can be scoped to selectors, updated at runtime with JavaScript, and inherited by child elements. Sass variables ($my-var) are compile-time only and produce static output. CSS variables enable theming, dark mode, and dynamic styling without preprocessors.

Flexbox uses a main axis (direction items are laid out) and a cross axis (perpendicular). justify-content aligns items along the main axis, align-items along the cross axis. The flex shorthand controls how items grow, shrink, and their base size.

Utility-first CSS (Tailwind) compiles to static CSS with zero runtime overhead, works with React Server Components, and eliminates dead code through content-based purging. CSS-in-JS libraries (styled-components, Emotion) provide dynamic styles via props but add runtime overhead and are incompatible with Server Components.