CSSForge

CSS Container Query Builder

Build @container queries — the modern way to create truly component-responsive layouts.

How container queries work: Unlike media queries (which respond to the viewport width), container queries respond to the parent element's width. Drag the slider to see each component adapt based on its container size.
Product Card

Stacks vertically on narrow, switches to horizontal row on wider containers

✓ 260px — compact○ 380px — horizontal

Premium Headphones

Noise-cancelling wireless audio

$129

min-width: 260px — compact

CSS

.parent {
  container: card / inline-size;
}

/* Narrow: stacked layout */
.card { flex-direction: column; }

/* Medium: compact info */
@container card (min-width: 260px) {
  .card { padding: 16px; }
}

/* Wide: horizontal layout with CTA */
@container card (min-width: 380px) {
  .card { flex-direction: row; }
  .cta { display: block; }
}
Profile Card

Shows progressive detail — bio text and follow button appear as space grows

✓ 280px — bio shown○ 340px — horizontal

Sarah Johnson

Senior Designer

Passionate about creating beautiful, intuitive interfaces.

CSS

.parent {
  container: profile / inline-size;
}

/* Narrow: stacked, no bio */
.profile { flex-direction: column; }

/* Medium: bio text appears */
@container profile (min-width: 280px) {
  .bio { display: block; }
}

/* Wide: side-by-side + follow button */
@container profile (min-width: 340px) {
  .profile { flex-direction: row; align-items: center; }
  .follow-btn { display: inline-flex; }
}
Stats Widget

Adds trend indicator and sparkline chart as the container expands

✓ 240px — trend shown○ 320px — chart shown

Total Revenue

$48,295

+12.5%this month

CSS

.parent {
  container: stat / inline-size;
}

/* Default: number only */

/* Medium: show percentage change */
@container stat (min-width: 240px) {
  .trend { display: flex; }
}

/* Wide: show sparkline chart */
@container stat (min-width: 320px) {
  .chart { display: flex; }
}
Navigation Bar

Icon-only on narrow containers, adds labels then search bar as width grows

✓ 280px — labels○ 360px — search bar
AppName

CSS

.parent {
  container: navbar / inline-size;
}

/* Narrow: icons only */
.nav-label { display: none; }
.search { display: none; }

/* Medium: show labels */
@container navbar (min-width: 280px) {
  .nav-label { display: inline; }
}

/* Wide: show search bar too */
@container navbar (min-width: 360px) {
  .search { display: flex; }
}

Container Query vs Media Query

@media — Viewport-based

/* Responds to the browser window */
@media (min-width: 768px) {
  .card { flex-direction: row; }
}

Works for page-level layouts but breaks when the same component is reused in different sized columns.

@container — Component-based

/* Responds to the parent's size */
@container card (min-width: 380px) {
  .card { flex-direction: row; }
}

The component adapts to wherever it's placed — sidebar, main content, modal — without any changes.