Layout shift happens when visible content moves after the page has started rendering. The CSS fix is usually to reserve the space that late content will need.
Images and media need dimensions
.media-frame {
aspect-ratio: 16 / 9;
background: #eef2eb;
}
.media-frame img {
inline-size: 100%;
block-size: 100%;
object-fit: cover;
}The frame reserves space before the image finishes loading. The image can arrive without pushing the content below it.
Ads and embeds need stable regions
If a site uses display advertising or third-party embeds, the surrounding layout should not collapse to zero and then expand. Reserve a clearly labeled region with a stable minimum size, and keep it separate from navigation and code actions.
Font shifts are real
Web fonts can move text when they swap in. Use a font stack with similar metrics, set sensible line heights, and avoid layouts where a single heading line break changes a large section height.
Interactive states should not resize tools
Buttons, tabs, counters, and filters should have stable dimensions. A selected state that adds a border can shift neighboring controls unless the border space is already reserved.
.tab {
border: 2px solid transparent;
}
.tab[aria-selected="true"] {
border-color: currentColor;
}The selected tab changes color, not size.
The debugging move
Record the page load or interaction, then identify the first element that moves. Work backward to the resource or state that arrived late. Then reserve the space at the component boundary instead of trying to patch every child.