Container Queries

Container queries style elements based on the size of their parent container, not the viewport — perfect for reusable components.

Example

.card-wrapper { container-type: inline-size; }
.card { display: block; }
@container (min-width: 400px) {
  .card { display: flex; align-items: center; gap: 1rem; }
}

CSS

Full Editor

Pro Tip

Container queries unlock truly context-aware components independent of page layout.

Related Resources

CSS Reference

Complete tag & property list

CSS How-To Guides

Step-by-step practical guides

CSS Exercises

Practice what you've learned