Container queries

Container queries apply styles based on the size of the container rather than the screen. A component adapts the same way in a narrow sidebar as in a wide column.

container-type: inline-size: makes an ancestor queryable by its width.
container-name: assigns a name to query a specific container.
@container (min-width: ...): applies rules when the container reaches that size.
cqw / cqh: units relative to the container’s width and height, equivalent to vw and vh.

Example

Lower the container width control. The card switches from one column to two when its container exceeds 28rem, without any media query.

ResultLiveContainer width100%

html

<div class="container">
  <div class="content">
    <div class="child">media</div>
    <div class="child">text</div>
  </div>
</div>

<div class="container">
  <div class="content">
    <div class="child">media</div>
    <div class="child">text</div>
  </div>
</div>

css

.container {
  border: 1px solid #2b7de0;
  container-type: inline-size;
  padding: 0.5rem;
}

.content {
  display: grid;
  gap: 1rem;
}

.child {
  padding: 1.5rem;
}

@container (min-width: 28rem) {
  .content {
    grid-template-columns: 1fr 2fr;
  }
}

.container {
  border: 1px solid #2b7de0;
  container-type: inline-size;
  padding: 0.5rem;
}

.content {
  display: grid;
  gap: 1rem;
}

.child {
  padding: 1.5rem;
}

@container (min-width: 28rem) {
  .content {
    grid-template-columns: 1fr 2fr;
  }
}

Edit the code or use the selectors: the result updates instantly.