CSS Container Queries

Style elements based on the width of their parent container rather than viewport.

❮ Previous Next ❯

Container queries allow you to adjust styles based on the size of an element's container rather than the entire browser viewport (@container (min-width: 400px)). Define the container with container-type: inline-size;.

Key Takeaways: CSS Container Queries

Mastering CSS Container Queries helps you write clean and reliable CSS code. Follow standard conventions, test edge cases, and keep logic simple. Try running the code example below and complete the exercises to build confidence.

CSS Container Queries Code Example

CSS

.card-wrapper {
  container-type: inline-size;
}
@container (min-width: 450px) {
  .card { display: flex; flex-direction: row; }
}

Output

Card becomes horizontal when parent width is >= 450px

Free sign-in required · Google login available

Finished this lesson?

Mark it complete to track your progress.

❮ Previous

CSS Subgrid

Next ❯

CSS Clamp, Min and Max

Stuck on something?

Ask the community in the CodesInTech forum.

Need a developer?

Learning on your own is great — and when you need professional help, our team builds custom software, websites and mobile apps for clients worldwide.

Explore Our Services

CSS Container Queries

💡 Key Takeaways: CSS Container Queries

CSS Container Queries Code Example

Key Takeaways: CSS Container Queries