CSS / Beginner

Reserve dimensions before polish

Aspect ratios and grid constraints prevent layout shifts before shadows and colors arrive.

Why this matters

The production reason.

Layout shift usually starts before visual polish: images without dimensions, grids without stable tracks, and embeds without aspect ratios.

Reserve the space first, then make it beautiful. Users should not lose their reading position because an image finally loaded.

This is especially important for product cards, blog thumbnails, ad slots, and dashboards.

Copy-ready example

.media-frame {
  aspect-ratio: 16 / 9;
  overflow: hidden;
}

.media-frame > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

How this applies outside a perfect demo, including frameworks, CMS platforms, stores, and builder workflows.

Next.js: Always provide width and height to Image.

Shopify: Reserve product image ratios so collection grids do not jump.

WordPress: Add width/height attributes or aspect-ratio wrappers for custom blocks.

Explore other stacks

Move from this CSS note into related HTML, CSS, Next.js, JavaScript, React, WordPress, and performance lessons.

Pre-render dynamic pages at build time instead of on every request to cut TTFB.

Local state avoids unnecessary parent renders and keeps component intent obvious.

Cancel outdated browser requests so fast UI changes do not render old data.

Sanitize on input, escape on output, and keep theme templates strict about user content.

Oversized images are still the easiest way to lose LCP before users see anything.

If it changes state, use button. If it navigates, use a link.