How can CSS aspect-ratio and modern layout properties prevent CLS?

WHAT THIS TESTS: This question probes whether you understand the browser rendering pipeline and how to prevent reflows caused by late-discovered media dimensions, which can push a page's CLS above the 0.1 good threshold. Specifically, it checks if you know that modern browsers use HTML width and height attributes to infer an aspect ratio before an image downloads, and how CSS properties like aspect-ratio, min-height, and contain-intrinsic-size extend that concept to flex, grid, and dynamically injected content. It also reveals whether you think about responsive design holistically rather than relying on brittle fixed dimensions.

A GOOD ANSWER COVERS: Four things in order. First, explicit width and height attributes on img or video tags so the browser can calculate the aspect ratio from the HTML before the resource loads, eliminating the need for the browser to re-layout once dimensions are known. Second, the CSS aspect-ratio property as a fallback or enhancement for elements that lack HTML dimensions, such as background images, divs with dynamic content, or responsive art-directed images where only one dimension is known. Third, container reservation techniques like min-height on parent wrappers for ads or embeds, and contain-intrinsic-size for content-visibility regions, which tell the browser how much space to allocate even when children are not yet rendered. Fourth, integration with modern layout systems like CSS Grid and Flexbox by ensuring grid-template-rows or flex-basis values respect intrinsic ratios rather than collapsing to zero and expanding later.

COMMON WRONG ANSWERS: Suggesting JavaScript to measure images after load and then resize their containers, which is too late to prevent CLS and often triggers additional layout shifts. Proposing fixed pixel heights for responsive containers, which breaks on mobile or when users zoom. Mentioning only one technique, such as aspect-ratio alone, without acknowledging the importance of HTML attributes or container sizing. Claiming that setting only CSS width and height without aspect-ratio is sufficient in all modern browsers, ignoring that HTML dimensions are the primary signal.

LIKELY FOLLOW-UPS: How would you handle an image whose aspect ratio is unknown at build time, such as user-generated content? What is the difference between content-visibility and contain-intrinsic-size, and when does each help CLS? How do you reserve space for third-party embeds like ads or social widgets that may not have predictable dimensions? Can aspect-ratio cause issues in flex or grid layouts if not paired with object-fit?

ONE CONCRETE EXAMPLE: Imagine a product listing page using CSS Grid where each card contains an image. Without width and height attributes, each image starts at zero height and expands as it downloads, causing the entire row to shift downward. By adding width="800" height="600" to each img, the browser immediately reserves a 4:3 box. If the design later switches to a 16:9 hero image via a CMS with no HTML dimensions, adding aspect-ratio: 16 / 9 in CSS preserves the same stability. For the ad slot below the grid, setting min-height: 250px on the wrapper prevents the footer from jumping when the ad server injects content.

Source: web.dev