css container queries

Create responsive components based on their container size using CSS container queries.

Explanation

• container-type: inline-size: Establishes a containment context for inline-size queries.
• @container (min-width: 400px): Applies styles when the container reaches the specified width.
• container-name: Assigns a name to query specific containers when multiple exist.
• More granular than media queries as they respond to the component’s container, not the viewport.

Usage

To create container-responsive components:

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

.card {
  padding: 1rem;
  background: white;
  border-radius: 8px;
}

@container card (min-width: 300px) {
  .card {
    display: flex;
    gap: 1rem;
  }
  
  .card-content {
    flex: 1;
  }
}

@container card (min-width: 500px) {
  .card {
    padding: 2rem;
  }
}