Container Query Generator

Create component-level responsive design with modern CSS

Container Query Generator

About Container Queries:

Container queries allow you to apply styles based on the size of a parent container rather than the viewport. This enables truly modular, component-based responsive design.

  • size: Container dimensions in both inline and block dimensions
  • inline-size: Only the inline dimension (width in horizontal writing modes)
  • normal: Default value, not a containment context
Named containers can be targeted with the container name function.
Generated CSS
/* Define the container */
.card-container {
  container-type: inline-size;
  container-name: card;
}

/* Apply styles based on container width */
@container card (min-width: 600px) {
  .card {
    display: flex;
    flex-direction: row;
  }
  
  .card-image {
    width: 40%;
  }
  
  .card-content {
    width: 60%;
    padding: 1.5rem;
  }
}

Common Container Presets

Click to apply common container size presets:

Container Query Example

Card Layout With Container Queries
<div class="card-container">
  <div class="card">
    <div class="card-image">
      <img src="product-image.jpg" alt="Product">
    </div>
    <div class="card-content">
      <h3>Product Title</h3>
      <p>Product description goes here...</p>
      <button>Add to Cart</button>
    </div>
  </div>
</div>
/* Define the container */
.card-container {
  container-type: inline-size;
  width: 100%;
  max-width: 900px;
  margin: 0 auto;
}

/* Base card styles */
.card {
  display: flex;
  flex-direction: column;
  border: 1px solid #ddd;
  border-radius: 8px;
  overflow: hidden;
}

.card-image img {
  width: 100%;
  height: auto;
  object-fit: cover;
}

.card-content {
  padding: 1rem;
}

/* Container query for larger containers */
@container (min-width: 500px) {
  .card {
    flex-direction: row;
  }
  
  .card-image {
    width: 40%;
  }
  
  .card-content {
    width: 60%;
  }
}

/* Container query for very large containers */
@container (min-width: 700px) {
  .card-content {
    padding: 2rem;
  }
}

Why Use Container Queries?

Container queries represent the next evolution in responsive design, allowing components to adapt based on their parent container's size rather than just the viewport.

Benefits
  • Component-Based Design: Elements respond to their immediate context
  • Reusable Components: Same component adapts to different placements
  • Layout Flexibility: Create dynamic layouts without JavaScript
  • DRY Code: Reduces duplication of media query breakpoints

Browser Support

Container Queries
92%

Supported in:

Chrome 105+ Firefox 110+ Safari 16.1+ Edge 105+ IE Not Supported

For browsers that don't support container queries, you can still use media queries as a fallback.

Related Tools

Media Query Generator All Responsive Design Tools