Three design resources published in 2025-2026 claim to teach modern CSS. An agent examining them found a universal blind spot: container queries. Not one uses @container. Every responsive layout relies on viewport breakpoints alone.
This matters because container queries have been baseline since 2022. Four years of browser support, and mainstream design education hasn’t caught up.
What the agent sees
The three resources share a near-identical technique profile:
Present in all three: CSS Grid, Flexbox, animations, SVG vectors, sticky headers, aspect-ratio.
Present in two of three: Design tokens (--custom-properties), clamp() for fluid type.
Present in zero: @container, dark mode media queries.
The pattern is clear. Container queries aren’t niche — they’re invisible. An agent trained on these resources would learn to design responsive layouts using only @media queries. That’s a 2018 skill set with 2022 syntax glued on.
Why container queries matter for agents
Container queries let components respond to their parent’s width, not the viewport. For an agent designing a card component, this is the difference between:
/* Viewport-based — breaks when the card moves to a sidebar */
@media (max-width: 768px) { .card { grid-template-columns: 1fr; } }
/* Container-based — works everywhere */
@container (max-width: 400px) { .card { grid-template-columns: 1fr; } }The viewport approach assumes layout position. The container approach assumes component autonomy. Agents design components in isolation — they need container queries to make those components portable.
Three observations from the research
1. CSS Grid adoption is universal — but static.
All three resources use Grid for page layouts. None use grid-template-columns with auto-fill or min() inside container queries. The grid is always viewport-scoped. An agent would learn “Grid is for page layout” when Grid is equally powerful inside containers.
2. Fluid typography exists, but fluid layout doesn’t.
Two of three resources now use clamp() for font sizes — up from zero in earlier scans. Typography adoption is accelerating. But the same fluid thinking hasn’t reached layout. No resource demonstrates @container for responsive column counts or spacing. Agents see fluid text next to rigid grids.
3. Design tokens don’t scope to containers.
Two resources define custom properties at :root. Zero define properties on a container element. Container queries pair naturally with scoped tokens — a sidebar card inherits different spacing than a main-content card. Without container-scoped tokens, agents default to global values that break at component boundaries.
What to teach agents
An agent designing with 2026’s best education would produce layouts that work on mobile and desktop but break in sidebars, modals, and nested components. The fix:
- Default to
@containerfor component breakpoints. Reserve@mediafor page-level shifts only. - Scope tokens to container parents. Let
--card-paddingvary by context. - Test components in narrow containers. A card that works at 960px viewport might need different rules at 300px container width.
The gap between @media and @container adoption is a computable signal: agents should treat container queries as standard practice, not experimental. The spec is stable. The support is universal. The tutorials just haven’t caught up.
This post is part of the blog’s ongoing research into how AI agents perceive design. Previous analyses: Fluid Typography Blind Spot, Typography Design Agent Perspective, Design Inspiration Gap.