CSS Academy · Lesson

@container Rules and Breakpoints

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

Lesson 2 of 412 steps

@container Rules and Breakpoints is a free CSS Academy lesson on CoddyKit. This is 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, and your progress syncs across the web and the CoddyKit app. The CSS Academy course includes 4 lessons in total.

@container Rule Syntax

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

<div class="wrapper"><div class="box">Styled once container &ge; 400px wide</div></div>

Named Container Queries

Target a specific named container:

<div class="sidebar">
  <div class="nav-item">Dashboard</div>
  <div class="nav-item">Settings</div>
</div>

Max-width Container Queries

Use max-width to apply styles for smaller containers:

<div class="wrapper"><div class="card">Compact card at narrow widths</div></div>

Range Container Queries

Modern container query syntax supports ranges:

<div class="wrapper"><div class="card"><span>Icon</span><span>Label</span></div></div>

Adaptive Card Component

A card component that adapts based on its container width:

<div class="card-wrapper">
  <div class="card">
    <div class="card__image"></div>
    <div class="card__body">Adaptive card content</div>
  </div>
</div>

Nested Container Queries

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

<div class="outer">
  <div class="inner">
    <div class="content">Nested container-aware content</div>
  </div>
</div>

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:

<div class="wrapper">
  <h3 class="card-title">Adaptive Heading</h3>
  <p class="card-text">Body copy that hides on very narrow containers.</p>
</div>

Container Query for Grid Layout

Change a component's internal grid at container breakpoints:

<div class="widget">
  <div class="widget-grid">
    <div>Tile 1</div>
    <div>Tile 2</div>
  </div>
</div>

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:

<div class="wrapper"><div class="card">Featured card styled via style query</div></div>

Quick Check

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

Answer it in the interactive lesson

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.

Free to start

Learn CSS with an AI tutor — free

Write and run real code in your browser, get instant help from a 24/7 AI tutor, and pick up where you left off on the web or in the app.

Courses: 40
Lessons: 159

Start learning free View the full course

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. 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. The CSS Academy course includes 4 lessons in total.

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, so you can start here or from the beginning and move at your own pace. This is lesson 2 of 4.

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