CSS Container Queries: Component-Driven Responsive Design

Container vs Media Queries

Media queries respond to viewport. Container queries respond to a component's own container.

.card-wrapper {
  container-type: inline-size;
  container-name: card;
}

.card { display: block; }

@container card (min-width: 400px) {
  .card { display: flex; gap: 1rem; }
  .card__image { width: 200px; }
}

@container card (min-width: 700px) {
  .card__image { width: 300px; }
}

Container Query Units

.text {
  font-size: clamp(1rem, 2.5cqi, 1.5rem); /* 1% of container inline size */
}

Style Queries

.sidebar { container-type: style; --density: compact; }

@container style(--density: compact) {
  .item { padding: 0.25rem; font-size: 0.875rem; }
}

Responsive Grid

.grid { container-type: inline-size; }

@container (min-width: 600px) { .inner { grid-template-columns: repeat(3, 1fr); } }
@container (min-width: 900px) { .inner { grid-template-columns: repeat(4, 1fr); } }

Support: Chrome 105+, Firefox 110+, Safari 16+.

-> Convert CSS colors with the Color Converter.