Container Queries

After this lesson you'll build components that style themselves by their container's size — so a single card works in a wide column or a narrow sidebar without a single media query.

Learn Python, JavaScript, Java and more with free interactive lessons, real projects and AI-powered help. Beginner-friendly.

Part of the free HTML & CSS course at LearnCodingFast — hands-on lessons with examples you run in your browser, plus practice exercises and a quick quiz.

Prerequisites: You should be comfortable with selectors from CSS Basics & Selectors and have met @media queries for responsive design. Container queries are the component-level upgrade to that idea.

Think of a media query as dressing for the weather forecast for the whole city : everyone hears "it's cold downtown" and puts on a coat, even the person sitting in a warm room. A container query is dressing for the room you're actually in — you check the temperature where you are and react to that.

A card component is the person. With media queries it dresses for the screen size (the city forecast), which is wrong when it's placed in a narrow sidebar on a big monitor. With a container query it dresses for its own container (the room), so it always fits — wherever you drop it.

1. Make a Container, Then Query It

Container queries are a two-step deal. First you mark an element as a query container with — this says "measure my width so my children can ask about it." means width-only containment, which is what you want almost every time. Optionally give it a name with so you can target a specific container later.

Then, on a child , you write an rule: {'@container card (min-width: 400px) '} . The browser checks the nearest ancestor that is a container and applies those styles when its width crosses the threshold. Run the example — the same card is vertical in the narrow panel and horizontal in the wide one, with no media query anywhere.

2. Container Query Units (cqw, cqh, cqi, cqb)

Queries flip layouts at breakpoints; container units let you scale things smoothly with the container. They mirror viewport units, but relative to the query container instead of the screen: cqw is 1% of the container's width, cqh is 1% of its height, and cqi / cqb are the writing-mode-aware versions (inline/block — width/height in normal left-to-right text).

They pair beautifully with : means "5% of the container's width, but never smaller than 1rem or larger than 3rem." Resize the box below and watch the text and bar respond to the container , not the window.

🎯 Your Turn 1 — Make It a Container

The @container rule is already written, but it never fires because the wrapper isn't a container yet. Add the two lines ( container-type and container-name ) so the badge turns green. The expected result is in the comments.

🎯 Your Turn 2 — Write the Query and a Unit

Containment is set up for you. Now write the @container breakpoint and use a cqi unit: make the heading scale with the container, and switch the tile to two columns when the container is at least 450px wide. Fill in the three blanks.

🧩 Mini-Challenge — A Self-Adapting Profile

Now without the blanks. Build a profile component that stacks vertically by default and goes horizontal (with a larger, cqi -scaled name) once its container passes 380px — then drop the same markup into a narrow frame and a wide frame. No media queries allowed. The brief and expected result are in the comments.

💡 Rule of thumb: containment goes on the wrapper ; the @container styles and cq* units go on the children inside it.

What's next: take control of which rules win across your stylesheet in CSS Cascade & Layers .

Practice quiz

• Browse all free courses
• Cheat sheets & quizzes
• Coding dictionary