Responsive layout

Breakpoint System and Mobile-First Media Queries

/* Breakpoint system: CSS variables (kept in sync with Design Tokens) */
:root {
  --bp-sm: 36rem;   /* 576px  - phone landscape */
  --bp-md: 48rem;   /* 768px  - tablet */
  --bp-lg: 64rem;   /* 1024px - small desktop */
  --bp-xl: 80rem;   /* 1280px - large desktop */
  --content-max-width: 72rem;  /* max content width */
}

/* Mobile-first: base styles target the narrowest viewport; min-width adds progressively */
.card-grid {
  display: grid;
  grid-template-columns: 1fr;         /* base: single column */
  gap: var(--space-4);
}

@media (min-width: 48rem) {           /* md: two columns */
  .card-grid { grid-template-columns: 1fr 1fr; }
}

@media (min-width: 64rem) {           /* lg: three columns */
  .card-grid { grid-template-columns: repeat(3, 1fr); }
}

/* Desktop-first (for comparison — not recommended for new projects) */
/* .card-grid { grid-template-columns: repeat(3, 1fr); } */
/* @media (max-width: 64rem) { grid-template-columns: 1fr 1fr; } */

/* clamp() fluid typography: min / preferred / max */
h1 { font-size: clamp(1.5rem, 4vw + 0.5rem, 3rem); }  /* 24px → 48px fluid */
p  { font-size: clamp(1rem, 1vw + 0.75rem, 1.25rem); }
.container { padding-inline: clamp(1rem, 5vw, 3rem); } /* responsive padding */

The table below is a sample convention (replace with your design system):

Container Queries and Grid+Flexbox Combination Layout

/* Container Query: component width determined by parent, not viewport */
.sidebar-widget {
  container-type: inline-size;
  container-name: widget;  /* named container: enables targeted queries */
}

/* @container: same component adapts in narrow sidebar vs wide main area */
.widget-grid {
  display: grid;
  grid-template-columns: 1fr;  /* default: single column */
}

@container widget (min-width: 28rem) {
  .widget-grid { grid-template-columns: 1fr 1fr; }
}

@container widget (min-width: 44rem) {
  .widget-grid { grid-template-columns: repeat(3, 1fr); }
}

/* @supports fallback for browsers that don't support container queries */
@supports not (container-type: inline-size) {
  .widget-grid { grid-template-columns: 1fr 1fr; }
}

/* Grid + Flexbox combination layout */
.page-layout {
  display: grid;
  grid-template-areas:
    "header header"
    "sidebar main"
    "footer footer";
  grid-template-columns: 240px 1fr;  /* fixed sidebar + flexible main area */
  grid-template-rows: auto 1fr auto;
  min-height: 100vh;
}

/* Use Flexbox inside main area for content flow */
.page-main {
  grid-area: main;
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  padding: var(--space-6);
}

/* Mobile: collapse sidebar */
@media (max-width: 48rem) {
  .page-layout {
    grid-template-areas: "header" "main" "footer";
    grid-template-columns: 1fr;
  }
  .page-sidebar { display: none; }  /* or use transform for slide-in */
}

Document container names (container-name), query thresholds, and fallbacks: single-column when container queries are unsupported, or approximate layout via @supports.

Layout decision flow

  [ Design / grid contract ]
        │
        ▼
  ┌─────────────┐     Root typography: clamp / rem, max-width (measure)
  │ Fluid & measure │── safe area, viewport-fit, landscape min height
  └─────────────┘
        │
        ▼
  ┌─────────────┐     Nav / full-page split / theme: @media (min-width …)
  │ Viewport BP  │── mobile-first order, tokens aligned with design
  └─────────────┘
        │
        ▼
  ┌─────────────┐     Cards / toolbars / modules in rails: container + @container
  │ Container Q  │── names, thresholds, no-support single-column fallback
  └─────────────┘
        │
        ▼
  ┌─────────────┐     srcset/sizes, table scroll or stack, touch targets ≥ 44×44 CSS px
  │ Media & Ix   │── foldables, keyboard focus, prefers-reduced-motion
  └─────────────┘
        │
        ▼
  [ Viewport matrix screenshots / Story multi-viewport + key container widths ]

Media, tables, and touch

Specify srcset/sizes or CSS object-fit strategies so small screens do not download oversized assets; document horizontal scroll for wide tables (overflow-x, sticky header strategy) or stacked layouts on narrow viewports.

Call out minimum touch target size, safe areas (notch), and viewport-fit when relevant; review animation downgrades with prefers-reduced-motion.

In-page demo: viewport band and container width

The script below runs only on this page: the readout shows current viewport width and a sample breakpoint band; drag the slider to change the query container width and watch columns switch at @container (min-width: 22rem).

SKILL outline