Verification Checkpoints

Checkpoint 1 — Layout mode barely matters

npm run modes

Pass: spread across all six modes is under ~3×, and flex and grid are not the slowest.

The checkpoint is that the result is boring. If you predicted flex/grid would be markedly slower, record the correction in the learning log — it is one of the most widely repeated pieces of frontend folklore.

Fail — spread over 10×: one variant is doing different work. The absolute variant must position every item, and the block variant must not wrap; check the generated markup.

Checkpoint 2 — Absolute positioning is not free

Pass: the absolute variant's style cost is markedly higher than the others (~2×+), and its initial layout is not the fastest.

You should be able to attribute the style cost to per-element inline left/top, and explain why its relayout number is nevertheless good (out-of-flow bounds invalidation scope).

Checkpoint 3 — Only min-content is expensive

npm run sizing

Pass: min-content is the slowest sizing keyword; fit-content and max-content are within ~15% of a fixed width.

Also note the inversion in the relayout column: % and auto are dearest to re-lay-out. You should be able to say why (they depend on the parent).

Checkpoint 4 — Container queries respond; media queries cannot

Pass:

@container  padding: 8px -> 0px    responded to the CONTAINER
@media      padding: 8px -> 8px    ignored it; viewport did not change

and @container's measured overhead is small (a few ms over 8,000 elements).

This is the module's central result. State the consequence: a component styled with media queries cannot be reused across contexts, and no amount of care inside the component fixes it.

Checkpoint 5 — You can place container-type correctly

Not a script. Given a card component that should stack below 400 px and sit horizontally above it, write the CSS. Then answer:

  1. Which element carries container-type, and why not the card root?
  2. What happens if a consumer forgets it?
  3. What sizing behaviour did you give up by adding it?
  4. When would @media still be correct for part of this component?

Pass: container-type on a wrapper with an externally-determined width; a clear statement that size containment means the container's inline size no longer derives from contents; and recognition that user-preference queries (prefers-reduced-motion) stay @media.

Module completion

  • Checkpoints 1–5
  • steps/03-principal-review.md answered
  • One real component converted from viewport queries to container queries, with the constraint documented
  • Learning log updated with the layout-mode correction