Platform under construction

Responsive CSS

Advanced

Container Queries

Container queries let a component respond to the size of its parent container instead of the entire viewport.

.card-wrap { container-type: inline-size; }

@container (min-width: 34rem) {
  .card { grid-template-columns: 12rem 1fr; }
}

Responsive mental model

Container queries make components context-aware.

Viewport media queries ask how wide the browser is. Container queries ask how much space this component actually has.

That matters because the same card might appear in a sidebar, a grid, a modal or a full-width section. The viewport can be large while the component is still narrow.

Container queries are excellent for reusable components because the component can adapt to its own available space.

container-type

Turns an element into a queryable container.

@container

Applies rules when the container meets a condition.

inline-size

Most component queries care about width.

Reusable UI

Components adapt wherever they are placed.

Visual model

Turn the responsive idea into something you can see.

Parent

Container

The parent provides the measured space.

Small

Stacked card

The component stays compact in a narrow container.

Wide

Split card

The same component changes when the container grows.

Portable

Reusable

The rule travels with the component.

Good CSS versus fragile CSS

Component responds to its container

.course-card-wrap { container-type: inline-size; }

.course-card { display: grid; gap: 1rem; }

@container (min-width: 34rem) {
  .course-card { grid-template-columns: 12rem 1fr; }
}

Viewport rule for every component

@media (min-width: 900px) {
  .sidebar .course-card { display: block; }
  .main .course-card { grid-template-columns: 12rem 1fr; }
}

Rules of thumb

Responsive CSS should reduce stress, not create more of it.

Use for components

Cards, teasers, panels and widgets benefit from container queries.

Set a container

A container query needs an ancestor with container-type.

Query inline size first

Width-based component changes are the common case.

Keep media queries for page layout

Viewport queries still make sense for large page structure.

Avoid nesting confusion

Know which ancestor is the container being queried.

Test reused components

Place the component in narrow and wide contexts.

Production thinking

Responsive quality is proven at awkward widths.

Why does this matter?

Container queries reduce layout hacks because components can make decisions based on their real space.

Accessibility

Container queries should not change meaning or source order. They should improve readability and usability in each context.

Production note

Use @supports if you need a careful fallback strategy for older browsers.

SEO note

Container queries preserve one semantic component instead of duplicate markup for different placements.

Live code lab

Change the CSS and watch the interface respond.

The preview runs in an isolated iframe. Links and forms stay inside the practice area, so you can experiment without leaving the lesson.

Mini assignment

Try this now.

Change .wrap width to 420px and predict the card layout.
Change the @container threshold to 24rem and judge whether it switches too early.
Remove container-type and explain why the query stops working.

Practice assignment

Do this before moving to the next lesson.

Create a wrapper with container-type: inline-size.
Build a card that stacks by default.
Use @container to create a split card when the wrapper is wide enough.

HTML CSS

Live preview

Self-check

Before you continue, prove that you understand Container Queries.