Container Queries

Resize the container — layout responds to container width, not viewport

500px container (wide)

Image Area

Card Title

This card layout changes based on its container width, not the viewport. Drag the slider to see it switch between row and column layouts.

Container Width: 500px

Breakpoint: 400px

CSS

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

@container card (min-width: 400px) {
  .card-content {
    display: flex;
    flex-direction: row;
    gap: 16px;
  }
}

@container card (max-width: 399px) {
  .card-content {
    display: flex;
    flex-direction: column;
  }
}