Posted on Aug 30 In CSS3, we have seen the use of Media Query.The rise of responsive and fluid design brought flexbox, grid system and then the media query.Media query is a CSS at-rule that makes the style of an element depend on the size of the viewport. It comes in very handy in developing responsive interfaces.A Container query is also a CSS at-rule, but it depends on the size of a parent element. The styling of an element depends on the size of its parent container and not the viewport.The container query just recently became stable in all major browsers. So, it can be implemented in your code.Visit caniuse to see supported browsers.For unsupported browsers, CSS flex and grid can be used as fallbacks to get a similar effect to the container query.Container query comes with some properties.These relative units are just like the viewport's relative units.Elements can be made reusable using the container query. An element can be used in two different containers and styled to respond to the size of those containers.In the image above, the card component is reusable. In the sidebar, it is vertically stacked while in the main content, it is horizontally stacked. It is responding to the size of its container.Below are code samples that produced the interface in the image above.A containment context is created "container-name: cardContainer " and the container type is defined as "container-type: size".The @container is set to when the max-width of the container is 853px. When the width falls within this range, the styles in the @container at-rule take effect.The card element is responsive to the size of the container (card-container) and not the viewport.If the width of the container is less than or equal to 853px, the card element's flex-direction becomes a column and the width increases, the size of the card-header element also increases in width.The same card element is used in the aside and the main element but it is styled differently because the size of the sidebar is different from the size of the main element.In the @container at-rule the responsive unit, cqi, is used on the font size of the card body's paragraph. A clamp function was used to clamp whatever the unit will be between 8px and 18px. Note that the clamp() function is not a container query feature.If the container's inline size grows, the font size of the paragraph increases because it is always 5% of the container's inline size. But it will never grow above 18px. Also, if the container's inline size shrinks, the font size of the paragraph decreases, but not less than 8px.The container query is a recent CSS at-rule used to query elements like the media query. However, the container query depends on the size of elements rather than the browser viewport. It was recently made stable in major browsers (Chrome/Edge 106, Safari 16, and Firefox 110).It gives more possibility for elements to have independent stylings depending on their sizes.Templates let you quickly answer FAQs or store snippets for re-use. Are you sure you want to hide this comment? It will become hidden in your post, but will still be visible via the comment's permalink. Hide child comments as well Confirm For further actions, you may consider blocking this person and/or reporting abuse Dumebi The Dev Moderator 👀 - Aug 27 Jean-Paul Rustom - Aug 11 Yeom suyun - Aug 26 Lucas Lima do Nascimento - Aug 24 Once suspended, gforge will not be able to comment or publish posts until their suspension is removed. Once unsuspended, gforge will be able to comment and publish posts again. Once unpublished, all posts by gforge will become hidden and only accessible to themselves. If gforge is not suspended, they can still re-publish their posts from their dashboard. Note: Once unpublished, this post will become invisible to the public and only accessible to Azubuike Chibueze Golden. They can still re-publish the post if they are not suspended. Thanks for keeping DEV Community safe. Here is what you can do to flag gforge: gforge consistently posts content that violates DEV Community's code of conduct because it is harassing, offensive or spammy. Unflagging gforge will restore default visibility to their posts. DEV Community — A constructive and inclusive social network for software developers. With you every step of your journey. Built on Forem — the open source software that powers DEV and other inclusive communities.Made with love and Ruby on Rails. DEV Community © 2016 - 2023. We're a place where coders share, stay up-to-date and grow their careers.