Hello CSS Container Queries


* Container Queries – Expressions from the container

In my last six years as a front-end developer, I haven’t been as excited about CSS Fitch as I am now. The container queries prototype is now available in Chrome Canary. Thanks to the efforts of smart people like Miriam Suzanne and others.

I remember seeing a lot of jokes about CSS container queries support, but they finally appeared. In this article I will tell you why you need container queries, how they make your life easier, and most importantly, you will see more powerful components and markup.

If you are as excited as I am, then let’s get started. You are ready?

The problem with CSS Media Queries

* CSS Media Queries – Media queries

The web page is made up of various sections and components, and we make them responsive with CSS media queries. There is nothing wrong with that, but it does have its limitations. For example, we can use a media query to show the minimum version of a component on mobile versus desktop.

Often times, responsive web design has nothing to do with viewport or screen size. It’s about the size of the container. Consider the following example:

We have a very typical card component markup that has two variations:

  • Stack (see aside)

  • Horizontal (see main)

There are many ways to do this in CSS, but the most common one is as follows. We need to create a base component and then make variations on it.

Note that we have created a .c-article – horizontal class to work with the horizontal version of the component. If the viewport width is greater than 46rem, then the component should go into horizontal variation.

It’s not bad, but somehow it makes me feel a little limited. I want the component to respond to the width of the parent component, not the browser viewport or screen size.

Let’s assume we want to use the standard .c-card in the main section. What’s going to happen? Essentially, the card will expand to the width of the parent component and thus be too large. See the following figure:

This is a problem and we can solve it with CSS container queries (hooray, finally). However, before diving into them, let me give you an idea of ​​the result we want.

We need to tell the component that if the width of its parent component is greater than 400px, then it should transition to a horizontal style. This is what the CSS would look like:

How do CSS Container Queries help us?

Note: CSS container queries are currently only supported in Chrome Canary under the experimental flag.

With CSS container queries we can solve the above problem and make a Fluid component. This means we can place a component in the parent and it will turn into a folded version, or we can put it in a wide component and it will turn into a horizontal version. Again, this is all independent of the width of the viewport.

This is how I imagine it.

The purple outline represents the width of the parent component. Note that when zooming in, the component adapts to that. Isn’t that awesome? This is the power of CSS container queries.

How do Container Queries work?

We can now experiment with Chrome Canary container queries. To activate them, go to chrome: // flags and search for “container queries” and then run them.

The first step is to add the contain property. Since the component adapts based on the width of the parent component, we need to tell the browser to only redraw the affected area, not the entire page. With the contain property, we can tell the browser about this in advance.

The inline-size value means that you only need to react to changes in the width of the parent component. I’ve tried using block-size, but that doesn’t work yet. Please correct me if I am wrong.

This is the first step. We have defined the .o-grid__item element as the parent of the .c-article it contains.

The next step is to add the styles required for the container queries to work.

@container is a .o-grid__item element and min-width: 400px is its width. We can even go further and add more styles. Here’s a video of what you can achieve for the card component:

Video link: https://ishadeed.com/assets/cq/cq-1.mp4

There are the following styles here:

  • The default is a card-like view.

  • A horizontal card with a small thumbnail.

  • A horizontal card with a large thumbnail.

  • If the parent component is too large, it will be like a hero style, indicating that this is a topic article.

Let’s take a look at the use cases for CSS container queries.

Using Cases for CSS Container Queries

Container Queries and CSS Grid auto-fit

In some cases, using auto-fit in the CSS grid can lead to unexpected results. For example, a component will be too wide and difficult to read.

To clarify things a bit, here’s a visual example showing the difference between auto-fit and auto-fill in the CSS grid.

Note that when using auto-fit, the elements expand to fill the available space. However, in the case of auto-fill, the grid items will not grow, and free space will appear in their place (the dotted item at the far right corner).

Perhaps you are now wondering what this has to do with CSS container queries? So, each grid item is a container, and when it expands (when we use auto-fit), we need the component to resize accordingly.

When we have four elements, the result should look something like this.

This will change as the number of articles decreases, see what happens. The fewer the articles, the wider they become. The reason is because auto-fit is used. The first option looks good, but the last two (2 in a row, 1 in a row) don’t look very good as they are too wide.

What if each component of the article changes depending on the width of its parent component? This way we can take advantage of auto-fit. Here’s what we need to do:

If the width of the grid item is greater than 400px, then the article should transition to a horizontal style.

Here’s how we can do it:

In addition, we want to display an article with a hero section if this is the only item in the grid.

That’s all. We have a component that is responsive to the width of its parent, and it can work in any context. Isn’t that awesome?

Take a look demo version on CodePen.

Side and main panel

* Sidebar – sidebar

Often times, we need to configure a component to work in containers with small widths, such as

Similar Posts

Leave a Reply

Your email address will not be published. Required fields are marked *