Imagine you have a grid of items you want to display in columns. With traditional responsive design techniques, you might use media queries to change the number of columns based on the viewport’s width.
What if I told you that there is a new method called container queries that you can use to style elements just by considering their container size?
CSS container queries solve most of the issues with writing media queries and allow developers to apply styles based on the size of the container without considering the viewport or other device characteristics.
In this article, I will discuss CSS container queries in depth with code examples to give you a better understanding.
CSS container queries, also known as element queries, are a new CSS feature that allows developers to apply styles to inner elements based on the size of their container rather than the size of the viewport. As a result, developers can design more flexible and responsive layouts without having to use fixed breakpoints.
Before getting started with CSS container queries, there are a few things you need to understand.
Naming a containment context in CSS container queries allows you to target a specific containment context with distinct styles using the @container at-rule.
To create a containment context, you need to apply the container property to an element and give the containment context a name using the container-name property. In addition, you need to decide between size, inline-size, or normal values for the container-type property. These values do the following:
The following example creates a containment context named navbar and uses it within the @container at-rule to apply the styles when the minimum width of the navbar containment context is 500 px or more.
.container {
container-type: inline-size;
container-name: navbar;
}
@container navbar (min-width: 500px) {
.ul {
display: grid;
}
} When you use container queries to add styles to a container, you must use container query length units. These units tell how long something is compared to the size of a query container. Components that use length units can be used in different containers without developers having to figure out new length values.
The container query length units are:
In the following example, the inline size of the container is used to set the font size of a heading.
@container (min-width: 500px) {
.nav-bar h1 {
font-size: max(1.75em, 1.1em + 2cqi);
}
} Currently, container queries are not supported in all browser versions. Therefore, it is essential to ensure styles are compatible with browsers that do not support container queries. In such cases, you can use the grid property or media queries as fallback styles.
.container{
display: grid;
grid-template-columns: 1fr 1fr;
}
@media (max-width: 700px) {
.container{
grid-template-columns: 1fr;
}
} To use container queries, you first need to define a container element that will serve as the reference for the query. Then you can use the @container rule to specify styles that should be applied based on the dimensions of the container.
For example, suppose you have a container element with the class .container and want to apply different styles based on the container’s width. You could use the following CSS:
/* html file */<html lang="en">
<head>
<title>Container Queries</title>
</head>
<body>
<div class="container">
<div class="paragraph">
Lorem Ipsum is ...
</div>
<div class="paragraph">
Lorem Ipsum is ...
</div>
<div class="paragraph">
Lorem Ipsum is ...
</div>
</div>
</body>
</html>
/* css file */.container {
container-type: inline-size;
container-name: maincontainer;
display: grid;
gap: 1em;
grid-template-columns: 1fr 1fr 1fr;
}
@container maincontainer (min-width: 500px) {
grid-template-columns: 1fr;
}
.paragraph{
background: rgb(231, 227, 227);
padding:1em;
font-size: 18px;
} In this example, the first block of styles will be applied to all .container classes by default. The second block of styles will be applied to .container classes with a width of at least 500 px.
Container queries are currently supported in the following browser versions:
You can find the detailed browser support specification here.
CSS container queries are an exciting addition to the CSS world. They provide an alternative for media queries, and developers can easily handle styles based on container sizes. I hope this article gave you a basic understanding of CSS container queries and how they work.
Thank you for reading.
The Syncfusion JavaScript suite is the only toolkit you need to build an application. It contains over 80 high-performance, lightweight, modular, and responsive UI components in a single package. Download the free trial and evaluate the controls today.
If you have any questions or comments, you can contact us through our support forums, support portal, or feedback portal. We are always happy to assist you!