Best practices for container queries
Tags: css, containerqueries
Published: 2023-06-20 09:12:17

---
title: Best practices for container queries
published: true
date: 2023-06-07 00:00:00 UTC
tags: Css,Containerqueries
canonical_url: https://zellwk.com/blog/container-queries-best-practice/
cover_image: https://zellwk.com/images/blog/container-query-best-practice/cqi-too-large.png
---

I've been playing around with container queries and so far, there is only one best practice that I would recommend.

**Whenever you use container queries, make sure you wrap the element with a container element**.

So your HTML should look like this:

```html 
<div class="container"> 
  <div class="component"> … <div> 
<div> 
```

This container should not be the element that creates a grid in your layout.

So don’t do this.

```html 
<div class='grid container'> 
  <div class="component"> … <div> 
<div> 
```

Do this instead

```html 
<div class="grid"> 
  <div class="container"> 
    <div class="component"> … </div>
  </div> 
</div> 
```

Now, all three code examples above assume you’re using an unnamed container, which is sufficient for most use cases.

```css
.container {
  container-type: inline-size;
}
```

## There’s a reason why we need to do this

Most of the time, I would have preferred the second structure (where the `grid` is also the `container`) because I will be able to reduce the `<div>` soup in the HTML.

After all, who doesn’t love clean code?

But beyond the obvious benefit (more semantic-looking HTML structure), there’s a reason why we have to use the third HTML structure which I recommend.

```html
<!-- There’s a reason why we need this structure -->
<div class="grid">
  <div class="container">
    <div class="component">…</div>
  </div>
</div>
```

## If you use the second structure, you won’t be able to use container query units

These units will likely be inaccurate.

Consider this.

If you use the second HTML structure, your `.grid` will be the container.

Since your `.grid` is the container, container query units will be based on the height and width of the `.grid`. This is probably not what you want, because it can produce unintended (huge) sizes like the one you see below.

<img src='https://zellwk.com/images/blog/container-query-best-practice/cqi-too-large.png' alt='cqi unit produced a size that was too large.'/>

In this example, I set the image to `25cqi` — which means 25% of the width of the container.

But because the `.grid` is the container, `cqi` draws from the width of the `.grid` (which is almost the same as the browser viewport in this case). So `cqi` produced an oversized image.

These blunders can be prevented if we used the HTML structure I recommend — because container query units will draw its width from the grid item instead.

Here’s the corrected version of what I was trying to create:

<img src='https://zellwk.com/images/blog/container-query-best-practice/cqi-just-right.png' alt='cqi unit produced a size that was just right.' />

That’s it!

This is really straightforward and I hope this article helps you prevent making some of the blunders I made when testing out container queries 🙂

As to the real reason why I made this blunder… well I was simply trying to see if I could use `:has` to automatically make the parent element a container.

And from there, I encountered this error!

**By the way, this article is originally written on my [blog](https://zellwk.com/blog/container-queries-best-practice/)**. Feel free to visit that if you want to have these articles delivered to your email first-hand whenever they're released! 🙂.