{"id":"l-css-2-5","courseId":"css-mastery","lang":"en","kind":"lesson","summary":"Make a session card change its layout based on the width of the slot it sits in, using size container queries, container units and custom-property style queries.","html":"

Waypoint uses the same session card in three places: the main schedule grid, a narrow “Up next” sidebar, and a full-width hero for the keynote. A media query can only ask “how wide is the screen?”, and the screen is the same width in all three cases. So the card in the sidebar got the wide layout, squashed into 280px, until someone added a .sidebar .session-card override, then a .hero .session-card override, and so on.

\n

The card shouldn’t care where it is. It should care how much room it has. Container queries let it ask exactly that.

\n

Make a container, then query it

\n

Two steps. First, declare which element is the container, the slot the card sits in:

\n
slots.css
.slot {\n  container: session / inline-size;\n}
\n

That shorthand sets container-name: session and container-type: inline-size. The type tells the browser you’ll query this element’s inline size (its width in horizontal writing), so it must be able to calculate that width without looking at the content inside.

\n

Second, write the card’s layout as a query against that container:

\n
session-card.css
.session-card {\n  display: block;\n}\n\n@container session (width >= 400px) {\n  .session-card {\n    display: grid;\n    grid-template-columns: 6rem 1fr;\n    gap: 1rem;\n  }\n}
\n

Now the card stacks in the 280px sidebar and switches to two columns in the 640px grid, with no knowledge of either. The name is optional; an unnamed @container (width >= 400px) uses the nearest ancestor with a size container type. Names help when containers nest and you want to skip one.

\n
\n A browser window containing a narrow sidebar slot and a wide main slot. The card in the narrow slot is stacked: time above title. The card in the wide slot is side by side: time column next to the title.\n \n viewport: same for both\n \n .slot 280px\n \n 09:30\n \n Title\n \n .slot 640px\n \n 09:30\n \n Title\n
The same card, two slots: the query measures the slot, not the viewport
\n

The two rules that trip everyone

\n

An element can’t query itself. The query looks for an ancestor container, so container-type on .session-card plus @container { .session-card { … } } does nothing for the card itself. Put the container on a wrapper.

\n

Containment changes how the container is sized. inline-size containment means the container’s width can’t depend on its children; otherwise a query could change the content, which changes the width, which changes the query, forever.

\n\n

Container units

\n

Inside a container, you get units relative to it: cqi is 1% of the container’s inline size, cqb 1% of its block size, and cqmin/cqmax the smaller or larger of the two. They make a component scale smoothly, not just at breakpoints:

\n
CSS
.session-card h3 {\n  font-size: clamp(1rem, 0.75rem + 2cqi, 1.5rem);\n}
\n

In the 280px sidebar the title sits near 1rem; in a 640px slot it grows towards 1.5rem. If no ancestor is a size container, container units fall back to the small viewport units, so they never break.

\n

Style queries for variants

\n

Size isn’t the only thing a card might respond to. The keynote card in the hero is a variant, and container style queries let a parent announce that through a custom property:

\n
CSS
.hero { --variant: featured; }\n\n@container style(--variant: featured) {\n  .session-card {\n    border-inline-start: 6px solid #6d28d9;\n  }\n}
\n

You don’t need container-type for this: every element is a style container by default, so the query checks the nearest ancestor’s computed --variant. Today, style queries work with custom properties only; querying regular properties like style(display: grid) isn’t supported anywhere yet.

\n\n

Your turn

\n

In the exercise, the card uses a media query, so it gets the wrong layout in at least one slot. Turn .slot into a named container, switch the layout to a container query at 400px, and add a style query for the featured variant. The checks change the slot’s width and set --variant on it to watch the card respond. That closes the layout section; next you’ll scale type and spacing fluidly across all those slot sizes.

\n","toc":[{"id":"sec-1","text":"Make a container, then query it","level":2},{"id":"sec-2","text":"The two rules that trip everyone","level":2},{"id":"sec-3","text":"Container units","level":2},{"id":"sec-4","text":"Style queries for variants","level":2},{"id":"sec-5","text":"Your turn","level":2}],"takeaways":["container-type: inline-size turns an element into a container, and @container (width >= 400px) styles its descendants based on that element’s width, not the viewport’s.","An element can’t query itself; put container-type on a wrapper and write the query for the elements inside it.","Inline-size containment means the container’s width can’t come from its content, so a container in a shrink-to-fit context collapses unless something gives it a width.","Container units such as cqi (1% of the container’s inline size) let type and spacing scale with the component.","Style queries on custom properties, such as @container style(--variant: featured), became Baseline in May 2026; size queries have been Baseline since 2023."],"further":[{"title":"Container size and style queries (MDN)","url":"https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Containment/Container_size_and_style_queries"},{"title":"@container (MDN)","url":"https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules/@container"},{"title":"Container queries (web.dev Learn CSS)","url":"https://web.dev/learn/css/container-queries"}],"quiz":[{"q":"

Why does this rule never apply?

\n
CSS
.session-card { container-type: inline-size; }\n@container (width >= 400px) {\n  .session-card { display: grid; }\n}
\n","options":[{"text":"@container needs a container name to work.","why":"Names are optional. An unnamed query uses the nearest ancestor container."},{"text":"The query should use min-width instead of the range syntax.","why":"Container queries support the range syntax (width >= 400px) in every browser that supports them."},{"text":"inline-size only works on grid containers.","why":"Any element can be a size container, whatever its display type."},{"text":"The card is querying itself, but a container query only styles the container’s descendants.","why":"Correct. The card looks for an ancestor container and finds none. Put container-type on the wrapper (the slot) and style the card from inside the query."}],"answer":3},{"q":"

You put container-type: inline-size on a flex item that has no width set, and it collapses to zero width. Why?

","options":[{"text":"Inline-size containment stops the element’s width from depending on its content, and a flex item’s width usually comes from its content.","why":"Correct. With containment the item’s content contributes nothing to its size; give it flex: 1, a width, or put the container on an element that is sized by its parent."},{"text":"Container queries don’t work inside flexbox.","why":"They work anywhere; the problem is how the container itself gets its size."},{"text":"The browser hides containers until a query matches.","why":"Containers are rendered normally whether or not any query matches."}],"answer":0},{"q":"

A card’s title has font-size: clamp(1rem, 4cqi, 1.5rem). What does 4cqi refer to?

","options":[{"text":"4% of the viewport’s width.","why":"That’s 4vw. cqi units resolve against the nearest container, not the viewport."},{"text":"4% of the nearest size container’s inline size.","why":"Correct. In a 400px slot, 4cqi is 16px; in a 600px slot, 24px (clamped to 1.5rem)."},{"text":"4% of the title’s own width.","why":"An element can’t measure itself this way; container units always look to an ancestor container."},{"text":"4 times the card’s font size.","why":"Multiples of the font size are written 4em; cqi has nothing to do with font size."}],"answer":1},{"q":"

Which query applies styles when a parent sets --variant: featured?

","options":[{"text":"@media (--variant: featured)","why":"Media queries test the device and viewport; they can’t read custom properties."},{"text":"@supports (--variant: featured)","why":"@supports tests whether the browser understands a declaration, not what value an element has."},{"text":"@container style(--variant: featured)","why":"Correct. Style queries test the computed value of a custom property on the nearest container, and every element is a style container by default."}],"answer":2}],"exercise":{"kind":"web","mode":"dom","starter":{"html":"
\n
\n

09:30

\n
\n

Container Queries in Production

\n

Cards that adapt to the slot they're in, not the screen.

\n
\n
\n
","css":".slot {\n width: 500px; /* the checks change this width */\n}\n.session-card {\n padding: 12px;\n border: 1px solid #e5e7eb;\n border-inline-start: 6px solid #cbd5e1;\n border-radius: 12px;\n}\n.session-card p, .session-card h3 { margin: 0; }\n.time { color: #6b7280; }\n\n@media (width >= 400px) {\n .session-card {\n display: grid;\n grid-template-columns: 6rem 1fr;\n gap: 1rem;\n }\n}\n"},"solution":{"html":"
\n
\n

09:30

\n
\n

Container Queries in Production

\n

Cards that adapt to the slot they're in, not the screen.

\n
\n
\n
","css":".slot {\n width: 500px; /* the checks change this width */\n}\n.session-card {\n padding: 12px;\n border: 1px solid #e5e7eb;\n border-inline-start: 6px solid #cbd5e1;\n border-radius: 12px;\n}\n.session-card p, .session-card h3 { margin: 0; }\n.time { color: #6b7280; }\n\n.slot {\n container: session / inline-size;\n}\n\n@container session (width >= 400px) {\n .session-card {\n display: grid;\n grid-template-columns: 6rem 1fr;\n gap: 1rem;\n }\n}\n\n@container style(--variant: featured) {\n .session-card {\n border-inline-start-color: #6d28d9;\n }\n}\n"},"checks":[{"id":"named-container","test":"return style('.slot', 'container-type') === 'inline-size' && style('.slot', 'container-name').split(' ').includes('session');"},{"id":"wide-side-by-side","test":"const setW = async (w) => { $('.slot').style.width = w + 'px'; await tick(16); }; const t = () => $('.time').getBoundingClientRect(); const b = () => $('.body').getBoundingClientRect(); const side = () => t().right <= b().left && Math.abs(t().top - b().top) < 1; const stacked = () => b().top >= t().bottom - 0.5; await setW(500); return side();"},{"id":"narrow-stacked","test":"const setW = async (w) => { $('.slot').style.width = w + 'px'; await tick(16); }; const t = () => $('.time').getBoundingClientRect(); const b = () => $('.body').getBoundingClientRect(); const side = () => t().right <= b().left && Math.abs(t().top - b().top) < 1; const stacked = () => b().top >= t().bottom - 0.5; await setW(300); const ok = stacked(); await setW(500); return ok;"},{"id":"threshold","test":"const setW = async (w) => { $('.slot').style.width = w + 'px'; await tick(16); }; const t = () => $('.time').getBoundingClientRect(); const b = () => $('.body').getBoundingClientRect(); const side = () => t().right <= b().left && Math.abs(t().top - b().top) < 1; const stacked = () => b().top >= t().bottom - 0.5; await setW(399); const below = stacked(); await setW(400); const at = side(); await setW(500); return below && at;"},{"id":"featured-variant","test":"const card = $('.session-card'); const before = style(card, 'border-left-color'); $('.slot').style.setProperty('--variant', 'featured'); await tick(16); const after = style(card, 'border-left-color'); $('.slot').style.removeProperty('--variant'); await tick(16); return before === 'rgb(203, 213, 225)' && after === 'rgb(109, 40, 217)';"}],"title":"Let the card measure its slot","prompt":"

The card switches to two columns with a media query, so it measures the screen instead of its slot. The checks set .slot to widths between 300px and 500px.

\n
    \n
  1. Make .slot a size container named session that tracks its inline size.
    2. \n
  2. Replace the media query with a container query: when the session container is 400px or wider, the card becomes the two-column grid; below that, it stays stacked.
    3. \n
  3. Add a style query: when --variant is featured, the card’s inline-start border becomes #6d28d9.
    4. \n
\n","hints":["container: name / type sets both the name and the type in one declaration.","The grid rules can move unchanged into @container session (width >= 400px) { … }.","For the variant: @container style(--variant: featured) { .session-card { border-inline-start-color: #6d28d9; } }."],"explanation":"

container: session / inline-size makes the slot a named size container, so @container session (width >= 400px) compares the slot’s width with 400px, whatever the viewport is. The card itself can’t be the container, because a query only styles descendants of the container it measures. The style query doesn’t need a container type: every element is a style container, and the card picks up the --variant value from its parent slot. In browsers without style-query support, the card simply keeps its default grey border.

\n","checkLabels":{"named-container":"The slot is an inline-size container named session","wide-side-by-side":"At 500px the time sits beside the content","narrow-stacked":"At 300px the card stacks","threshold":"The switch happens exactly at 400px","featured-variant":"–variant: featured turns the border violet"}},"words":670,"readMinutes":3}