DEV Community

Eyel Mordido for Plank

Posted on

Using CSS size container queries

CSS size container queries are now fully supported in all major browsers and offer a great way to create responsive page elements.

One advantage of using size container queries is it enables us to place components in different spaces of our web page without needing to know the dimensions of that specific space.

Let’s see how we can use it in creating a responsive card component:
stacked cards component

A rule for using container queries is we cannot style or change the container if we want to measure its dimensions. We can only style its children. In the image above, we are wrapping the .cards__grid element with a parent .cards__container element so we can style the grid and all its contents.

1. The first step is to define the element we want to get the dimensions of by using the container-type property.

Here we are making the .cards__container element as our containment context so we can query its width.

.cards__container {
    container-type: inline-size;
}
Enter fullscreen mode Exit fullscreen mode

The values for the container-type property can either be:

  • size - query the height and width of the container.

When we make an element the containment context, the built-in dimensions of its content is ignored so the container loses its height. Its width will not be affected because width is an extrinsic size of a block element. They always occupy the entire width of the space.

.cards__container {
    container-type: size;
}
Enter fullscreen mode Exit fullscreen mode

See how the pink-bordered .cards__container element is no longer stretching the full height of its content after changing the value of container-type to size:
stacked cards component

  • inline-size - only query the width. This is the recommended value for full responsiveness.
  • normal - doesn't allow us to query the dimensions but allows us to query the styles.

Naming the container is also considered a best practice. We can think of the name as a class or ID and we can give multiple names to a container.

.cards__container {
    container-type: inline-size;
    container-name: cards-container;
}
Enter fullscreen mode Exit fullscreen mode

2. After defining and naming the container, we can add our query.
We start the query with the @container at-rule followed by the name. Similar to media queries, we can use the min-width or max-width properties for the condition.

@container cards-container (min-width: 701px) {

}
Enter fullscreen mode Exit fullscreen mode

We can also use the ranged syntax:

/* if the width is between 700 and 1000 pixels. */
@container cards-container (700px < width < 1000px) {

}
Enter fullscreen mode Exit fullscreen mode

3. Finally, we can add the style rules for the children of the container.

.cards__container {
  container-type: inline-size;
  container-name: cards-container;
}

@container cards-container (min-width: 701px) {
  .cards__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .card figure {
    display: block;
  }

  .card__text {
    margin-top: 1rem;
  }

  .card h3 {
    font-size: 1.8rem;
  }

  .card figcaption {
    font-size: 1.2rem;
  }
}

@container cards-container (min-width: 1000px) {
  .cards__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
Enter fullscreen mode Exit fullscreen mode

Now, our .cards__grid element should switch to a two-column grid layout when the container is more than 700px wide, the image stacked on top of the text and the font-size bigger.
two-column cards grid

At a width of 1000px and above, it should change to a three-column grid layout.
three-column cards grid

Why use size container queries over media queries?

At the beginning of this article we mentioned that size container queries allow us to place elements anywhere on the page without worrying about the size of the space.

To demonstrate this more clearly, let's place the card component in a blog page that has a narrower <main> element. With media queries, the cards' layout will stay as a three-column grid because we are checking for the page's width instead of the container's.
blog page with cards

We will need to override the styles of the cards that are in the blog page to correct this.

With container queries, the cards component is more reusable and responsive. The cards' grid will respond to the width of its container and will update to the stacked layout.
blog page with cards

You can learn more about container queries with these resources:

Top comments (3)

Collapse
 
artydev profile image
artydev

Thank you

Collapse
 
fininhors profile image
Francisco Junior

Thanks for share with us.

Collapse
 
meganmcewan profile image
Megan McEwan

Great article!