{"id":72453,"date":"2024-07-31T21:00:15","date_gmt":"2024-07-31T13:00:15","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=72453"},"modified":"2024-08-07T19:29:42","modified_gmt":"2024-08-07T11:29:42","slug":"css-container-queries","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/css-container-queries\/","title":{"rendered":"CSS Container Queries"},"content":{"rendered":"

In traditional responsive design, we rely on media queries to change styles based on the overall viewport size. This works well for adjusting layouts for different screen sizes, but it falls short when you need components to adapt based on their container\u2019s size.<\/p>\n

To solve this situation, Container Queries<\/a> were introduced in CSS. They allow you to apply styles to elements based on the dimensions of their containing block, giving you more granular control over responsive design.<\/p>\n

Let\u2019s say we have a Card component, containing an image<\/em>, title<\/em>, and a few paragraphs<\/em>. The Card has two layout modes: horizontal<\/em> for large screens and vertical<\/em> for smaller screens.<\/p>\n

In the horizontal mode<\/em>, the image will be on the left, and the title and paragraphs are on the right.<\/p>\n

\"Card<\/figure>\n
\n
<\/i><\/div>\n
Card in horizontal layout<\/div>\n
<\/div>\n<\/div>\n

In the vertical mode<\/em>, the image is on top, and the title and paragraphs are below it.<\/p>\n

\"Card<\/figure>\n
\n
<\/i><\/div>\n
Card in vertical layout<\/div>\n
<\/div>\n<\/div>\n

We want this Card to switch between these two modes. Traditionally, we would wrap the styles around the @media<\/code> query, for example:<\/p>\n

\r\n.card {\r\n    display: flex;\r\n    gap: 4rem;\r\n}\r\n.card .featured-img {\r\n    width: 40%;  \r\n}\r\n.card .content {\r\n    width: 60%;  \r\n}\r\n\r\n@media screen and (width <= 720px) {\r\n    .card {\r\n      flex-direction: column;\r\n    }\r\n    \r\n    .card .featured-img {\r\n      width: 100%;  \r\n    }\r\n  \r\n    .card .content {\r\n      width: 100%;  \r\n    }\r\n}\r\n<\/pre>\n
The problem here is that Media Queries only account for the viewport size, not the container size. If the Card is placed inside a container with a width of 500px, the Card will still be in the horizontal mode, even though it's not suitable for the container size. We may end up with the content and the image being squished, or the image overflowing the container.<\/p>\n
\"Card<\/figure>\n
\n
<\/i><\/div>\n
Card with Media Query<\/a><\/div>\n
<\/div>\n<\/div>\n
This is one example where Container Queries can be useful. With Container Queries, we can apply styles based on the container's size, instead of just the viewport size.<\/p>\n
To use them, we will need to wrap our .card<\/code> with a new container. In this example, we will name it .card-container<\/code>. Then we can add it with the container-type: inline-size<\/code> declaration.<\/p>\n
\r\n.card-container {\r\n    container-type: inline-size;\r\n    width: 100%;\r\n}\r\n<\/pre>\n
The inline-size<\/code> value specifically enables querying the inline dimension, usually the width in horizontal writing modes of a container.<\/p>\n
When we set container-type: inline-size<\/code> on an element, we're essentially telling the browser to treat that element as a container whose width can be queried using Container Queries. This is required for applying styles based on the size of the container, rather than the viewport. The width<\/code> is also important to ensure the container takes up the full width of its parent.<\/p>\n
Now, we can apply the styles based on the container's size in addition to the Media Queries:<\/p>\n
\r\n@container (max-width: 720px) {\r\n    .card {\r\n        flex-direction: column;\r\n    }\r\n    \r\n    .card .featured-img {\r\n        width: 100%;  \r\n    }\r\n    \r\n    .card .content {\r\n        width: 100%;  \r\n    }\r\n}\r\n<\/pre>\n
The two cards from our example should now switch to the vertical layout when the container's width is less than 720px, regardless of the current viewport size.<\/p>\n
\"Card<\/figure>\n
\n
<\/i><\/div>\n
Card with Container Queries<\/a><\/div>\n
<\/div>\n<\/div>\n
Browser Compatibility<\/h2>\n\n\n\n\n\n\n\n\n\n\n\n
Browser<\/th>\nDesktop Version<\/th>\nMobile Version<\/th>\n<\/tr>\n<\/thead>\n
Google Chrome<\/td>\n105 and later<\/td>\n105 and later<\/td>\n<\/tr>\n
Mozilla Firefox<\/td>\n109 and later<\/td>\n109 and later<\/td>\n<\/tr>\n
Safari<\/td>\n16.4 and later<\/td>\n16.4 and later<\/td>\n<\/tr>\n
Microsoft Edge<\/td>\n105 and later<\/td>\n105 and later<\/td>\n<\/tr>\n
Opera<\/td>\n91 and later<\/td>\n91 and later<\/td>\n<\/tr>\n
Internet Explorer<\/td>\nNot supported<\/td>\nNot supported<\/td>\n<\/tr>\n
Samsung Internet<\/td>\nN\/A<\/td>\n20.0 and later<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
Inspirations<\/h2>\n
We've walked through a very common use case of using Container Queries. We can actually do so much more with them to create more innovative features on our website, such as combining them with animations, interactive elements, and more. Here are some demos of using Container Queries for your inspiration.<\/p>\n
CSS Container Query House<\/h3>\n
You can resize the container size vertically or horizontally and see the house expand with more rooms and windows.<\/p>\n
See the Pen CSS Container Query House<\/a> by Arco (@Lumocra<\/a>) on CodePen<\/a>.<\/span><\/p>\n
See the Pen Responsive House with CSS Container Query<\/a> by Gayane Gasparyan (@gayane-gasparyan<\/a>) on CodePen<\/a>.<\/span><\/p>\n
Squish CSS Container Queries<\/h3>\n
Click the button Add Squishy<\/strong> to add more squishies inside the block and see how their reaction changes the more you add as there isn't enough room inside.<\/p>\n
 See the Pen CSS Container Queries<\/a> by Max Swann (@maxcswann<\/a>) on CodePen<\/a>.<\/span><\/p>\n