A Quick Introduction to CSS container queries

CSS container queries are a new feature that is added into CSS and that can be a game changer in developing responsive layouts, especially in the era of component based ui development.

we all have been using media queries from long time and this container queries will be an alternative to media queries and on top of that it provides more flexibility.

responsive layouts are developed with help of media queries, but we all know that media queries works based on screen resolution

but the container queries gives us more flexibility by styling the element based on the size of the container rather than resolution of screen. Which means that we can apply styling to all the elements inside a container based on the size of container

Let’s try to understand this with simple and basic example.

Here we have a div with class name as card which contains an image and some dummy text inside p tag.This card is wrapped inside another div with class as main and this main div will be our container.

with some basic styling i.e by displaying it as flex and some background colour the image and text are displayed adjacent to each other in a row.

The adjacent placement of the image and card looks good on larger screens, but on smaller screens, they need to be stacked in a column.

Until now, we have used media queries to achieve this.Now let’s try with help of container queries.In order to do that the main div needs to be defined as container.

To make this main div as container we have to define container type property as shown below

To make it as container we have to set container-type property to as inline-size,basically container-type property can have two of types of values one is inline-size and another one is size. lets focus on inline-size as most probably we will be using this value itself.

Next, we need to write the responsive styling using container queries. Container queries are similar to media queries, but instead of the media keyword, we use the @container keyword. We then define the size of the container. Remember that the size we define is for the container, not for the screen. In the above code, for card class we are defining the flex direction as column. This will be applied as soon as the container size goes less than 600px, and the image and paragraph will be stacked one below the other as shown below.

yes that is it! This is how you can write container queries.

Before ending this article, lets try to understand few points about container queries

• Nested container queries: If an element is nested within multiple containers, the styles within the inner most containers are influenced by its close or immediate parent container.
• Named container queries: We can also use named container queries to target specific container elements. To define a named container, we use the container-name property and give it any value we want.

Here we are defining named container with container-name as property and card as value

This container query will only apply the styles to the .card element if the container named card has an inline size of 600px or less.

That’s it for now! Thanks for reading. See you in the next post!