css-container-queries

What are Container Queries?

Container queries enable styling elements based on their container's size rather than the viewport size. Unlike media queries that respond to the browser window, container queries make components self-contained and truly reusable.

Key Concept:

```css

/ Define a container /

.card-wrapper {

container-type: inline-size;

container-name: card;

}

/ Query the container /

@container card (min-width: 400px) {

.card-title {

font-size: 2rem;

}

}

```

Tailwind Approach:

```html

```

Container Query vs Media Query

| Feature | Media Query | Container Query |

|---------|-------------|-----------------|

| Responds to | Viewport size | Container size |

| Reusability | Layout-dependent | Fully portable |

| Use case | Page layouts | Component styling |

| Syntax | @media | @container |

---

💡 Why Use Container Queries?

1. Component Portability

• Components adapt to their context, not the viewport
• Same component works in sidebar (narrow) or main area (wide)
• No need for different component variants

2. Simpler Component Logic

• Components don't need to know about page layout
• Follows single responsibility principle
• Reduces coupling between components and layouts

3. Better for Design Systems

• Components are truly self-contained
• Works in any layout context (grid, flex, sidebar)
• Easier to maintain and test in isolation

4. Modern Web Architecture

• Aligns with component-based frameworks (React, Vue, Svelte)
• Better for micro-frontends
• More predictable behavior

When to Use Container Queries vs Media Queries

🤔 Use Container Queries when:

• Styling reusable components (cards, widgets, forms)
• Component appears in multiple contexts
• Component needs to adapt to its parent's size
• Building a component library

🤔 Use Media Queries when:

• Changing overall page layout
• Adjusting navigation structure
• Modifying font sizes globally
• Viewport-specific features (like mobile-first approach)

---

What to Do

Review and refactor responsive components to use container queries where appropriate.

Implementation Checklist

#### 1. CSS Implementation

Step 1: Define the container

```css

.component-wrapper {

container-type: inline-size; / or 'size' for both dimensions /

container-name: myComponent; / optional but recommended /

}

```

Step 2: Add container queries

```css

/ Use the container name /

@container myComponent (min-width: 400px) {

.component-title {

font-size: 2rem;

}

}

/ Or query nearest container /

@container (min-width: 400px) {

.component-title {

font-size: 2rem;

}

}

```

Step 3: Use modern range syntax (optional)

```css

@container (400px <= width <= 800px) {

.component-content {

display: grid;

grid-template-columns: repeat(2, 1fr);

}

}

```

#### 3. Tailwind CSS Implementation

Step 1: Define container with @container class

```html

```

Step 2: Use container query variants

```html

```

Available Tailwind Container Breakpoints:

• @3xs - @container (width >= 16rem) (256px)
• @2xs - @container (width >= 18rem) (288px)
• @xs - @container (width >= 20rem) (320px)
• @sm - @container (width >= 24rem) (384px)
• @md - @container (width >= 28rem) (448px)
• @lg - @container (width >= 32rem) (512px)
• @xl - @container (width >= 36rem) (576px)
• @2xl - @container (width >= 42rem) (672px)
• @3xl - @container (width >= 48rem) (768px)
• @4xl - @container (width >= 56rem) (896px)
• @5xl - @container (width >= 64rem) (1024px)
• @6xl - @container (width >= 72rem) (1152px)
• @7xl - @container (width >= 80rem) (1280px)

📝 Note: These are Tailwind's default breakpoints. You can customize them in globals.css (Tailwind v4) using CSS variables or use arbitrary values like @min-[500px]:grid for custom container widths.

Step 3: Named containers (Tailwind)

```html

```

#### 4. Common Patterns

Pattern 1: Card Component

```html

```

Pattern 2: Responsive Grid

```html

```

Pattern 3: Mixed Container + Media Queries

```html

```

5. Review Process

✅ Focus on:

• Recently modified components
• Components using media queries for internal layout
• Reusable component patterns

⚠️ Watch out for:

• Overusing container queries (media queries are still needed for layouts)
• Nesting too many containers (can cause confusion)
• Not naming containers when multiple are present
• Fixed heights (let content flow naturally)

❌ Avoid:

• Replacing all media queries with container queries
• Container queries for page-level layouts
• Complex nesting without clear container names

6. Testing Checklist

After implementing container queries:

• [ ] Component works in narrow containers (sidebar)
• [ ] Component works in wide containers (main content)
• [ ] Component works in medium containers (grid cells)
• [ ] No layout breaks at container breakpoints
• [ ] Content doesn't overflow fixed heights
• [ ] Performance is acceptable (container queries are efficient)

7. Browser Support

✅ Supported:

• Chrome 106+
• Edge 106+
• Safari 16+
• Firefox 110+

💡 Tip: For older browsers, use @supports or progressive enhancement:

```css

/ Fallback for older browsers /

.component {

padding: 1rem;

}

/ Enhanced with container queries /

@supports (container-type: inline-size) {

@container (min-width: 400px) {

.component {

padding: 2rem;

}

}

}

```

---

✅ Good: Component-Based Container Query

```html

```

Why it's good: Card is self-contained and works in any layout context.

❌ Bad: Using Media Queries for Component Internals

```html

```

Why it's bad: Card assumes it's always full width at md breakpoint. Breaks when placed in a sidebar.

✅ Good: Named Containers for Clarity

```html

```

Why it's good: Clear which container each query refers to.

---

❌ Mistake 1: Using container queries for page layouts

```html

Vanilla CSS

```css

/ Define container /

.wrapper {

container-type: inline-size; / or 'size' /

container-name: myContainer; / optional /

}

/ Query container /

@container myContainer (min-width: 400px) {

/ styles /

}

/ Modern range syntax /

@container (400px <= width <= 800px) {

/ styles /

}

```

Tailwind CSS

```html