@media<\/code> queries, there\u2019s a tight coupling of the styling of a component\u2019s content and the size of the browser window. This means that the styles within a given component depend on the layout.<\/p>\n\n\n\nWith @container<\/code> queries, we can instead tightly couple the styling of a component\u2019s content with the size of the component itself<\/em>, regardless of how that component fits into the larger layout. In short, you can set up components to respond to the container size without having to know the breakpoints of the overall page layout. Yay for increased isolation!<\/p>\n\n\n\nLet’s think through an example to illustrate this. Pulling from Michelle Barker’s helpful MDN article about container queries<\/a>, here’s a mockup:<\/p>\n\n\n\n![\"\"](\"https:\/\/i0.wp.com\/frontendmasters.com\/blog\/wp-content\/uploads\/2023\/12\/layout-desktop-01.webp?resize=1024%2C731&ssl=1\")
<\/figure>\n\n\n\nWhen there’s more width available, each article preview has the image on the left and copy on the right. When there’s less room available, it stacks the image on top of the content.<\/p>\n\n\n\n
Without container queries, we’d have to specify which cards we want to have the vertical layout, which ones should have the horizontal layout, and which should have a bigger image explicitly. When you then consider all possible screen sizes and container layouts, this quickly becomes quite complicated.<\/p>\n\n\n\n
Additionally, if there’s a possibility for the sidebar to be collapsed or if you sometimes need to show additional content (like ads) alongside this content, it gets even more complex! Not to mention when the layout gets changed to something else, like switching from 4 columns to 3, you have to go back and adjust everything.<\/p>\n\n\n\n
Container queries can help us more easily address this sort of situation in a much more manageable way!<\/p>\n\n\n\n
Container queries are separate from, but can be in used in combination with, the contain<\/code> property<\/a> The contain<\/code> property is useful for performance and preventing re-renders and, crucially, the thing that made @container<\/code> queries possible under the hood.<\/p>\n\n\n\nBlock and inline sizing<\/strong><\/h2>\n\n\n\nBefore diving further into container queries, it’s important to make sure we have a good understanding of block and inline sizing as it has a large impact on the container-type<\/code> and the container unit(s) we use.<\/p>\n\n\n\nInline size<\/a> is equivalent to width for horizontal writing mode<\/a> and equivalent to the height for vertical writing modes. The block size<\/a> is the respective opposite. <\/p>\n\n\n\nMake sure you keep this in mind! The terms “block” and “inline” are from the concept of “logical properties”<\/a> and the direction CSS has been heading for a while.<\/p>\n\n\n\nHow to use container queries<\/h2>\n\n\n\n
To use container queries, you must first define a container-type<\/a><\/code> and optionally a container-name<\/a><\/code>.<\/p>\n\n\n\nThe container-type<\/code> can have a value of size<\/code>, inline-size<\/code>, or normal<\/code>.<\/p>\n\n\n\n\nsize<\/code> establishes a query container for the inline and block dimensions as well as for style (which we cover at the end of this article). <\/li>\n\n\n\ninline-size<\/code> establishes a query container for the inline dimensions as well as for style. You’ll likely use this 99% of the time.<\/li>\n\n\n\nnormal<\/code> establishes a query container only for style.<\/li>\n<\/ul>\n\n\n\nOne potential gotcha is that if you use container-type: size<\/code> you need to add an explicit height. It will ignore the height of children elements. This is how it is specced<\/a> to behave.<\/p>\n\n\n\nMost often, using container-type: inline-size<\/code> probably makes the most sense.<\/p>\n\n\n\nThe container-name<\/code> is a value of the <custom-indent><\/a><\/code> type (essentially some name you make up). <\/p>\n\n\n\nYou can also use the container<\/code> shorthand to define both properties. Such as:<\/p>\n\n\n.my-component<\/span> {\n\u00a0 container<\/span>: my-component \/ inline-size;\n}<\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n\n\nWhen using a container query or container query unit (which we will cover more in later sections), it will reference the nearest container in its ancestry tree unless you specify a particular container by including the container-name<\/code>.<\/p>\n\n\n\nOnce you’ve defined a container, you can use a @container<\/code> query and select any descendant elements inside of it. For example:<\/p>\n\n\n@container<\/span> (min-width:<\/span> 500px<\/span>) {\n\u00a0 .my-component<\/span> p<\/span> {\n\u00a0 \u00a0 font-size<\/span>: 1.5rem<\/span>;\n\u00a0 }\n}<\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n\n\nOr, if you want to use the container name in the query:<\/p>\n\n\n
@container<\/span> my-component (min-width:<\/span> 500px<\/span>) {\n\u00a0 .my-component<\/span> p<\/span> {\n\u00a0 \u00a0 font-size<\/span>: 1.5rem<\/span>;\n\u00a0 }\n}<\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n\n\nNote that you cannot<\/em> style the element that is being queried inside of the container query itself (like .my-component {}<\/code> in this case). But you can<\/em> use it as a part of a more complex selector as seen above.<\/p>\n\n\n\nBut you don’t have to<\/em> refer to the container element in the selector, meaning this is also valid:<\/p>\n\n\n@container<\/span> my-component (min-width:<\/span> 500px<\/span>) {\n\u00a0 p<\/span> {\n\u00a0 \u00a0 font-size<\/span>: 1.5rem<\/span>;\n\u00a0 }\n}<\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n\n\n