CSS Container Query Examples

Basic Card Layout

A card that switches from vertical to horizontal layout based on container width.

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

.card {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1rem;
}

@container card (min-width: 400px) {
  .card {
    flex-direction: row;
    align-items: center;
  }

  .card-image {
    width: 150px;
    flex-shrink: 0;
  }
}

Responsive Navigation

Navigation that adapts from icons-only to full labels based on available space.

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

.nav {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  border-radius: 0.5rem;
  transition: background 0.2s;
}

.nav-item span { display: none; }

@container (min-width: 200px) {
  .nav { flex-direction: row; }
  .nav-item span { display: inline; }
}

@container (min-width: 400px) {
  .nav-item { padding: 0.75rem 1.5rem; }
}

Container-Aware Grid

A grid that changes columns based on container width, perfect for sidebar widgets.

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

.responsive-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}

@container (min-width: 300px) {
  .responsive-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@container (min-width: 500px) {
  .responsive-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

Fluid Typography with cqw

Text that scales with container width using container query units (cqw, cqi).

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

.responsive-text {
  font-size: clamp(1rem, 5cqw, 2rem);
  line-height: 1.4;
}

/* Container query units */
.hero-text {
  font-size: 8cqw;  /* 8% of container width */
  padding: 5cqi;    /* 5% of container inline size */
}

@container (min-width: 400px) {
  .responsive-text {
    font-size: 1.25rem;
  }
}

@container (min-width: 600px) {
  .responsive-text {
    font-size: 1.5rem;
  }
}

Adaptive Form Layout

Form that switches from stacked to inline labels based on container space.

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

.form-row {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.form-row label {
  font-weight: 500;
}

@container (min-width: 400px) {
  .form-row {
    flex-direction: row;
    align-items: center;
  }

  .form-row label {
    width: 120px;
    flex-shrink: 0;
  }

  .form-row input {
    flex: 1;
  }
}

Syntax Quick Reference

/* Basic query */
@container (min-width: 400px) { ... }

/* Named container */
@container sidebar (max-width: 300px) { ... }

/* Multiple conditions */
@container (min-width: 400px) and (max-width: 800px) { ... }

/* Style queries (experimental) */
@container style(--theme: dark) { ... }