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: <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. <div class='grid container'> 
  <div class="component"> … <div> 
<div> Do this instead <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. .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 is also the ) because I will be able to reduce the soup in the HTML. grid container <div> 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. 
<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 will be the container. .grid Since your is the container, container query units will be based on the height and width .grid of the . This is probably not what you want, because it can produce unintended (huge) sizes like the one you see below. .grid In this example, I set the image to — which means 25% of the width of the container. 25cqi But because the is the container, draws from the width of the (which is almost the same as the browser viewport in this case). So produced an oversized image. .grid cqi .grid cqi 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: 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 to automatically make the parent element a container. :has And from there, I encountered this error! . Feel free to visit that if you want to have these articles delivered to your email first-hand whenever they're released! 🙂. By the way, this article is originally written on my blog

The code in this story is for educational purposes. The readers are solely responsible for whatever they build with it.

Optimizing Component Development in Astro without Astro Files

The Best Practice for Container Queries: Place Them in a Parent Element

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

A Quick CSS Guide: Crafting Neon Buttons with Glow Effects & Animations

The Quickest Way to Test Components That Use Container Queries

HTML: How to Resize Markup Like an Image With CSS Container Queries!

105 Stories To Learn About K8s

10 Best Practices for Using Kubernetes Network Policies

1 Stories To Learn About Weekly Sponsor

A Quick CSS Guide: Crafting Neon Buttons with Glow Effects & Animations

The Quickest Way to Test Components That Use Container Queries

HTML: How to Resize Markup Like an Image With CSS Container Queries!

105 Stories To Learn About K8s

10 Best Practices for Using Kubernetes Network Policies

1 Stories To Learn About Weekly Sponsor

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps