CSS Academy · Lesson

@container Rules and Breakpoints

Write @container rules that apply styles when the container reaches specific dimensions.

@container Rules and Breakpoints is a free CSS Academy lesson on CoddyKit — lesson 2 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the CSS Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.

@container Rule Syntax

@container is the at-rule that applies styles when a container meets certain size conditions. Its syntax mirrors media queries:

@container (min-width: 400px) {
  /* styles for content inside a 400px+ container */
}

Named Container Queries

Target a specific named container:

@container sidebar (min-width: 200px) {
  .nav-item { flex-direction: row; }
}

Max-width Container Queries

Use max-width to apply styles for smaller containers:

@container (max-width: 300px) {
  .card { padding: 12px; font-size: 0.875rem; }
}

Range Container Queries

Modern container query syntax supports ranges:

@container (300px <= width <= 600px) {
  .card { flex-direction: row; }
}

Adaptive Card Component

A card component that adapts based on its container width:

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

.card {
  display: flex;
  flex-direction: column;
}

@container (min-width: 400px) {
  .card {
    flex-direction: row;
    align-items: center;
  }

  .card__image {
    flex: 0 0 150px;
  }
}

Nested Container Queries

Container queries can be nested. The inner query references the nearest container ancestor by default.

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

.inner {
  container: inner / inline-size;
}

@container (min-width: 600px) {
  @container inner (min-width: 200px) {
    .content { /* both conditions met */ }
  }
}

Container Query Breakpoints

Unlike viewport breakpoints, container breakpoints should be chosen based on when the component layout needs to change, not arbitrary device sizes. Start with the component's minimum and maximum content width.

Typography in Containers

Adjust typography for small containers:

@container (max-width: 320px) {
  .card-title { font-size: 1rem; }
  .card-text { display: none; } /* too small for body text */
}

@container (min-width: 600px) {
  .card-title { font-size: 1.5rem; }
}

Container Query for Grid Layout

Change a component's internal grid at container breakpoints:

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

.widget-grid {
  display: grid;
  grid-template-columns: 1fr;
}

@container (min-width: 500px) {
  .widget-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

Style Queries (Beyond Size)

Container queries also support style queries that check computed custom property values. This enables component variants driven by CSS variables without extra classes:

@container style(--featured: true) {
  .card { border: 2px solid gold; }
}

Quick Check

What does @container (min-width: 500px) target?

Recap

@container rules apply styles to elements inside a container when the container meets size conditions. Use named containers for targeting specific ancestors. Container breakpoints should be based on content needs, not device sizes. Style queries extend container queries to check CSS variable values — enabling powerful declarative component variants.

Frequently asked questions

Is the “@container Rules and Breakpoints” lesson free?

Yes — the full text of “@container Rules and Breakpoints” is free to read here on the web, and the CSS Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the CSS Academy course, upgrade to CoddyKit PRO.

What will I learn in “@container Rules and Breakpoints”?

Write @container rules that apply styles when the container reaches specific dimensions. You practise CSS Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.

Do I need any experience to start CSS Academy?

No prior experience is required. CSS Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 2 of 4, so you can start here or from the beginning and move at your own pace.

How long does the “@container Rules and Breakpoints” lesson take?

Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.

Can I write and run code in this CSS Academy lesson?

Yes. Every CSS Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.

All lessons in this course

← Back to CSS Academy