Layout

Container queries

Widely availablesince Aug 2025

Replaces: Media queries that guess at a component’s width from the viewport. The component asks its own container instead, so the same card works in a sidebar and in a hero.

See it working

Drag my corner

At 360px of my own width I go side by side. The window never changed.

The syntax

.card-wrap { container-type: inline-size; }

@container (min-width: 360px) {
  .card { grid-template-columns: 140px 1fr; }
}

The demo’s full CSS

.dm-cq-wrap { container-type: inline-size; resize: horizontal; overflow: auto;
  width: 100%; max-width: 100%; min-width: 210px; padding: 4px;
  border: 1px dashed #9aa0b4; border-radius: 12px; }
.dm-cq-card { display: grid; gap: 12px; padding: 14px; border-radius: 10px; background: #fff; }
.dm-cq-img { aspect-ratio: 16/9; border-radius: 8px; background: linear-gradient(135deg, #4f46e5, #0ea5e9); }
.dm-cq-card h4 { margin: 0 0 4px; font-size: 16px; }
.dm-cq-card p { margin: 0; font-size: 13.5px; line-height: 1.5; color: #3d4450; }
@container (min-width: 360px) {
  .dm-cq-card { grid-template-columns: 140px 1fr; align-items: center; }
}

For browsers without it

Write the narrow layout as the default and let the query add the wide one. A browser without container queries keeps the stacked card, which is a complete design, not a broken one.