display: flex creates flex container. justify-content aligns horizontally, align-items vertically, flex-direction sets axis, flex-wrap allows wrapping, gap adds spacing.
display: grid creates grid container. Define columns with grid-template-columns, rows with grid-template-rows, place items with grid-column/row, use gap for spacing.
Use media queries @media (max-width: 768px) for breakpoints. Mobile-first approach with min-width. Use relative units (%, rem, em, vw, vh) instead of fixed pixels.
static (default), relative (offset from normal position), absolute (relative to positioned parent), fixed (viewport), sticky (hybrid of relative and fixed).
CSS Variables (--var-name), calc() for calculations, clamp() for responsive sizing, aspect-ratio for maintaining proportions, container queries for component-based responsive design.