CSS Showcase · Live Demo

Accordions that stretch.

A single accordion component that collapses into a stacked list on mobile and expands into side-by-side panels on desktop — powered by grid-template-rows transitions and container queries.

Featured demo

mobile · stacked
Accordions hide secondary content until the user asks for it. On mobile that keeps the screen short; on larger screens the same panels can sit side-by-side.
Use grid-template-rows with transition to animate from 0fr to 1fr. The inner wrapper needs overflow: hidden so the content clips cleanly as it grows.
A single container query reads the available width and switches the layout axis. No JavaScript breakpoint logic is required.

mobile design patterns

accordion-stacked.css
/* Stacked list (single-open) */
.accordion[data-pattern="stacked"] {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.5rem;
}

.accordion-panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.35s ease;
}

.accordion-item[data-open="true"] .accordion-panel {
  grid-template-rows: 1fr;
}

CSS features used

  • • Container queries
  • • grid-template-rows transition
  • • 0fr / 1fr animation
  • • CSS custom properties
  • • Smooth transitions
  • • Semantic tokens