Engineering resilient web layouts without layout shift.

Aspect-ratio containers and image placeholders

Layout shift occurs when the browser does not know the dimensions of an incoming asset before it renders. Reserving exact proportional boxes using modern CSS aspect ratios prevents sudden reflows as media loads over slow connections.

.preview-container {
  aspect-ratio: 4 / 3;
  width: 100%;
  overflow: hidden;
  border-radius: 12px;
}

Local font definitions with fallback metrics

Web font swapping is another primary contributor to layout shift. Using next/font with local font files and properly specified font-display settings ensures font metrics match fallback system typefaces before variable axes finish loading.

• Specify explicit weight ranges for variable fonts (e.g. 100 900).
• Use display: swap to prevent invisible text during initial load.
• Avoid transform: scaleX() hacks to simulate condensed letterforms.

Defensive grid boundaries

In CSS Grid layouts, child elements with flexible text or long words can inadvertently force track expansion beyond the intended layout width. Explicitly setting minmax(0, 1fr) ensures columns respect their assigned parent width.

.editorial-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 32px;
}