--- title: CSS Container Queries | daily.dev description: Container queries let a component style itself based on the width of its own wrapper rather than the browser viewport, making it possible to build cards and... canonical: https://daily.dev/posts/css-container-queries-iq9qajosu twitter:card: summary_large_image twitter:site: @dailydotdev og:type: website og:site_name: daily.dev og:title: CSS Container Queries | daily.dev og:description: Container queries let a component style itself based on the width of its own wrapper rather than the browser viewport, making it possible to build cards and... og:url: https://daily.dev/posts/css-container-queries-iq9qajosu og:image: https://api.daily.dev/og/posts/Iq9QAjosU.png og:image:alt: CSS Container Queries og:image:width: 1200 og:image:height: 630 og:locale: en --- > ## Documentation Index > Fetch the complete documentation index at: https://daily.dev/llms.txt > Use this file to discover all available pages before exploring further. # CSS Container Queries **[Flavio Copes](https://daily.dev/sources/flaviocopes)** · 9 min read · 24 upvotes · 0 comments ## Summary Container queries let a component style itself based on the width of its own wrapper rather than the browser viewport, making it possible to build cards and widgets that adapt correctly whether they sit in a wide main column or a narrow sidebar. The piece walks through marking an ancestor as a container with container-type: inline-size, writing @container rules on descendants (never on the container itself), naming containers to avoid nested containers stealing a query, container query units like cqi and cqw, why size containment exists and how it can collapse shrink-wrapped elements, and common traps such as copying page breakpoints onto components. It closes with guidance on when to reach for container queries versus sticking with media queries, and notes browser support is solid across current Chrome, Firefox, and Safari. ## Full article daily.dev links to this article rather than hosting it. Read it at the original source: ## Questions this post answers ### What is the difference between CSS container queries and media queries? Media queries measure the browser viewport and are meant for page-level layout changes, like hiding a nav or switching a grid from three columns to one. Container queries measure the width of a specific ancestor element marked with container-type, so a reusable component can change layout based on the space it's placed in, regardless of the viewport size. _daily.dev surfaces practical css layout guidance for developers choosing between viewport and component-level responsiveness._ ### Why doesn't my @container rule apply when I put it on the same element that has container-type set? Container queries only style descendants of the container element, never the container itself, because that element is not considered its own descendant. The fix is to add a dedicated wrapper with container-type: inline-size, then write the @container rule targeting the child component inside that wrapper, such as a card element. _Developers debugging layout quirks like this often check daily.dev for concrete css container query fixes._ ### What does the cqi unit mean in CSS and when should I use it? cqi represents 1% of the container's inline size, following the writing mode direction, similar to how vw represents 1% of viewport width. It is commonly combined with clamp(), for example font-size: clamp(1rem, 4cqi, 1.5rem), so a title grows with its container's width but stays capped within a minimum and maximum size, unlike relying on viewport-based units. _daily.dev helps developers compare css unit choices when tuning component typography across layouts._ ## Similar posts on daily.dev - [Stop Treating CSS Container Queries Like Traditional Media Queries — Smashing Magazine](https://daily.dev/posts/stop-treating-css-container-queries-like-traditional-media-queries-smashing-magazine-opborjqov) · Smashing Magazine · 8 upvotes · 0 comments - [Container queries in 2026: Powerful, but not a silver bullet](https://daily.dev/posts/container-queries-in-2026-powerful-but-not-a-silver-bullet-zamknhyli) · LogRocket · 7 upvotes · 0 comments - [Container Queries and Units in Action](https://daily.dev/posts/container-queries-and-units-in-action-fngqaphz7) · OddBird · 6 upvotes · 0 comments - [How to Build Responsive Designs and Scroll Effects with CSS Container Queries](https://daily.dev/posts/how-to-build-responsive-designs-and-scroll-effects-with-css-container-queries-xw53ucqmc) · freeCodeCamp · 10 upvotes · 1 comments --- Tags: [#css](https://daily.dev/tags/css), [#ui-design](https://daily.dev/tags/ui-design) [View this post on daily.dev](https://daily.dev/posts/css-container-queries-iq9qajosu) ```json {"@context":"https://schema.org","@graph":[{"@type":"Organization","@id":"https://daily.dev/#organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180},"sameAs":["https://twitter.com/dailydotdev","https://github.com/dailydotdev","https://www.linkedin.com/company/daily-dev-ltd"]},{"@type":"WebSite","@id":"https://daily.dev/#website","url":"https://daily.dev","name":"daily.dev","publisher":{"@id":"https://daily.dev/#organization"},"potentialAction":{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https://daily.dev/search?q={search_term_string}"},"query-input":"required name=search_term_string"}}]} {"@context":"https://schema.org","@type":"TechArticle","headline":"CSS Container Queries","url":"https://daily.dev/posts/css-container-queries-iq9qajosu","mainEntityOfPage":{"@type":"WebPage","@id":"https://daily.dev/posts/css-container-queries-iq9qajosu"},"datePublished":"2026-08-17T05:24:08.519Z","dateModified":"2026-09-14T07:30:56.670Z","description":"Container queries let a component style itself based on the width of its own wrapper rather than the browser viewport, making it possible to build cards and...","image":"https://media.daily.dev/image/upload/f_auto,q_auto/v1/posts/7219243bb6b6113ecc90bd933965a4ef?_a=AQAEuop","thumbnailUrl":"https://media.daily.dev/image/upload/f_auto,q_auto/v1/posts/7219243bb6b6113ecc90bd933965a4ef?_a=AQAEuop","isAccessibleForFree":true,"articleSection":"Flavio Copes","inLanguage":"en","publisher":{"@type":"Organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180}},"author":{"@type":"Organization","name":"Flavio Copes","logo":"https://media.daily.dev/image/upload/t_logo,f_auto/v1/logos/1f2dbd275797411bbd37bfdaaf0951a9","url":"https://daily.dev/sources/flaviocopes"},"commentCount":0,"discussionUrl":"https://daily.dev/posts/css-container-queries-iq9qajosu","interactionStatistic":[{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":24},{"@type":"InteractionCounter","interactionType":{"@type":"CommentAction"},"userInteractionCount":0}],"keywords":"css,ui-design","timeRequired":"PT9M"} {"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https://daily.dev"},{"@type":"ListItem","position":2,"name":"Flavio Copes","item":"https://daily.dev/sources/flaviocopes"},{"@type":"ListItem","position":3,"name":"CSS Container Queries"}]} {"@context":"https://schema.org","@type":"FAQPage","@id":"https://daily.dev/posts/css-container-queries-iq9qajosu#faq","mainEntity":[{"@type":"Question","name":"What is the difference between CSS container queries and media queries?","acceptedAnswer":{"@type":"Answer","text":"Media queries measure the browser viewport and are meant for page-level layout changes, like hiding a nav or switching a grid from three columns to one. Container queries measure the width of a specific ancestor element marked with container-type, so a reusable component can change layout based on the space it's placed in, regardless of the viewport size. daily.dev surfaces practical css layout guidance for developers choosing between viewport and component-level responsiveness."}},{"@type":"Question","name":"Why doesn't my @container rule apply when I put it on the same element that has container-type set?","acceptedAnswer":{"@type":"Answer","text":"Container queries only style descendants of the container element, never the container itself, because that element is not considered its own descendant. The fix is to add a dedicated wrapper with container-type: inline-size, then write the @container rule targeting the child component inside that wrapper, such as a card element. Developers debugging layout quirks like this often check daily.dev for concrete css container query fixes."}},{"@type":"Question","name":"What does the cqi unit mean in CSS and when should I use it?","acceptedAnswer":{"@type":"Answer","text":"cqi represents 1% of the container's inline size, following the writing mode direction, similar to how vw represents 1% of viewport width. It is commonly combined with clamp(), for example font-size: clamp(1rem, 4cqi, 1.5rem), so a title grows with its container's width but stays capped within a minimum and maximum size, unlike relying on viewport-based units. daily.dev helps developers compare css unit choices when tuning component typography across layouts."}}]} ```