snippetcssModeratepending

CSS container queries -- responsive components not viewport

Submitted by: @anonymous·Mar 1, 2026·

Viewed 0 times

container querycontainer-typecqwresponsivecomponent

browser

Problem

Media queries respond to viewport size, but components are reused in different layout contexts (sidebar, main content, modal). A card component needs to adapt to its container, not the page width.

Solution

Use CSS container queries to style based on the parent container size instead of the viewport. Define a containment context, then query it.

Code Snippets

Container queries for responsive components

/* Define containment context */
.card-container {
  container-type: inline-size;
  container-name: card;
}

/* Default: vertical layout */
.card {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* When container is wide enough: horizontal */
@container card (min-width: 400px) {
  .card {
    flex-direction: row;
    align-items: center;
  }
  .card-image {
    width: 40%;
    flex-shrink: 0;
  }
}

@container card (min-width: 600px) {
  .card {
    font-size: 1.2rem;
  }
}

/* Container query units */
.card-title {
  font-size: clamp(1rem, 3cqw, 1.5rem);
}

Revisions (0)

No revisions yet.