Playing With Container Queries

Container queries finally landed in all stable browsers in February and I haven’t had any time to play with them yet. Time to do some goofing around!

For these experiments, I made two Astro components. One that will be a parent container and one that will be its child. I stuck each of the components in the same directory as this post because I don’t think I’ll be needing them outside of this demo.

<div>
  <h2>Test Component</h2>
  <p>
    This is a test component we'll be using 
    to mess around with container queries.
  </p>
</div>