CSS Tricks
CSS Trick ★ Featured

Container Queries

Components that respond to their container's size, not the viewport. Perfect for reusable UI.

#css #responsive #container-queries #layout

Browser Support

✓ Chrome 105+ ✓ Firefox 110+ ✓ Safari 16+ ✗ Edge

Container Queries

Make components respond to their container size instead of the viewport.

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


@container (min-width: 400px) {
  .card {
    grid-template-columns: 200px 1fr;
  }
}

Live Demo

Container Queries
RESIZE
↔ Drag edge to resize
300px
CSS Code
.cq-container {
container-type: inline-size;
width: 100%;
}
.cq-card {
display: grid;
grid-template-columns: 1fr;
gap: 1rem;
padding: 1rem;
background: rgba(139, 92, 246, 0.1);
border-radius: 0.5rem;
}
.cq-icon {
width: 60px;
height: 60px;
background: linear-gradient(135deg, #8b5cf6, #06b6d4);
border-radius: 0.5rem;
flex-shrink: 0;
}
.cq-title {
margin: 0 0 0.25rem 0;
font-size: 1rem;
font-weight: 600;
}
.cq-desc {
margin: 0;
font-size: 0.875rem;
opacity: 0.7;
}
@container (min-width: 300px) {
.cq-card {
  grid-template-columns: 60px 1fr;
  align-items: center;
}
}

Drag the right edge of the preview to see the card layout switch between stacked and horizontal based on the container width.

Share this CSS trick

Comments