CSS Contain

ELI5 — The Vibe Check

CSS contain builds an invisible fence around an element and tells the browser 'changes inside this fence don't affect anything outside.' This lets the browser skip recalculating the entire page when something changes inside. Good fences make fast neighbors.

Real Talk

The CSS contain property isolates an element's layout, paint, and size calculations from the rest of the document. Values include layout, paint, size, and style. This enables browser optimizations by guaranteeing that changes within contained elements won't trigger recalculations elsewhere.

Show Me The Code

.widget {
  contain: layout paint;
}

When You'll Hear This

"Add contain: layout to each card component so one card's changes don't reflow the grid" / "Content-visibility uses CSS contain under the hood"