CSS

Flexbox is the shortest path to both-axis centering. `place-items: center` on a grid does the same in one line if the parent has a height.

Flex works on one axis at a time. Set `flex-direction` first, then reason about `justify-content` (main axis) and `align-items` (cross axis). `gap` replaces margin hacks.

Grid is two-dimensional. `repeat(auto-fit, minmax(...))` gives a responsive card layout without a single media query.

Single-line truncation needs `overflow`, `white-space`, and `text-overflow` together. Multi-line uses the widely supported `-webkit-line-clamp`.

`position: sticky` fails silently when an ancestor has `overflow: hidden`/`auto`, or when no offset is set. Give it a `top` and check the ancestor chain.