window 1000px wide1000px ≥ 600px: yes0px< 400px: no≥ 400px: yes0px< 400px: no≥ 400px: yes1.slot {2 container-type: inline-size;3}4@media (min-width: 600px) {@container (min-width: 400px) {5 .card { display: flex; }6}1.page {2 display: grid;3 grid-template-columns:4 250px 1fr; 450px 1fr;5 gap: 50px;6}@mediainline-sizeinline-size≥ 400px?≥ 400px?flex450px
Front: the card rules and the page grid, as codeBack: the browser window, its two slots and the same card in eachTokens: the query, the container type, flex and the new width on their wayBack: the browser window, 1000px wide, with a sidebar slot and a main slot holding the same card. Front: the card rules and the page grid. A media query asks the window and gives both cards the same answer. A container query asks each card's own slot: 250px says no, 700px says yes. When the grid gives the sidebar 450px, its card switches layout although the window has not changed. A real browser does all of this at once, every time it lays out the page: it finds each container, sizes it, answers the queries and applies the matching rules. The figure does it one step at a time so you can see each part.

The problem

  1. A card component is used twice on the same page. The page grid gives the sidebar 250px and the main column the rest, 700px. With no layout rules yet, both cards stack the image above the text.

Container queries

Resizing

What happens

;; step 1/7 · one-card
window   1000px wide
.page    grid: 250px 1fr, gap 50px
  <aside class="slot">   250px
  <main class="slot">    1000 - 250 - 50 = 700px
each slot holds the same <article class="card">
no query rules yet: both cards stacked

A real browser does all of this at once, every time it lays out the page: it finds each container, sizes it, answers the queries and applies the matching rules. The figure does it one step at a time so you can see each part. The page drawing is to scale across (1000px of window) but approximate in height. The cards in the figure show only the lines that matter; the full style.css also sets body { margin: 0; }, the image size (120px tall, flex: 0 0 160px beside the text) and the text padding.