Container queries

This article by Chris Ferdinand does a good job of explaining CSS container queries.

https://gomakethings.com/container-queries-are-rad-af/

How they work:

1. Define a container.

.container {
  container-name: some-container;
}

2. Specify what measurement type you want to track.
   • inline-size: width change
   • size: height or width change.
   • scroll-state: scroll changes

.container {
  container-name: some-container;
  container-type: inline-size; /* ie, width */
}

3. Apply styles based to descendants based on changes to that container. @container docs on MDN.

@container some-container (width > 300px) {
  .thing-inside-the-container {
    padding: 1rem;
  }
}

date: Thursday, February 5, 2026
time: 11:09 AM
tagged: #webdesign #dev #css #code
published: https://blakewatson.com/notes/951626b6