← Back to gallery
CSS

Grid Row Accordion Expand

An accordion whose panel animates height without knowing its content size by transitioning grid-template-rows between 0fr and 1fr on an outer grid wrapper.

Duration
1s
Resolution
1440×900
Format
CSS
accordionexpand-collapsegrid-template-rows0fr-1frauto-height

Layout transition / grid-template-rows / 0fr → 1fr

Grid row accordion expand

Reimplements accordion expand/collapse using a CSS grid wrapper that transitions grid-template-rows between 0fr and 1fr, animating natural content height without JS measurement.

faq stack — 0.30s expand

Request a reset link from the sign-in page and check your inbox.

Yes — share a workspace link from Settings → Team.

Help center pattern

FAQ Stack

A stack of FAQ questions where each panel expands to show an answer, animating grid-template-rows from 0fr to 1fr without measuring height.

  • FAQ
  • help
  • 0fr → 1fr

Add the destination — US, EU, and APAC supported. Next-day available in 12 cities.

Cards, ACH, and wire transfer. Discount codes apply to the first month only.

Sequential disclosure

Checkout Stepper

A checkout stepper reveals one panel at a time with a grid-row expand. Collapsed rows keep their summary visible so users can scan the flow.

  • checkout
  • stepper
  • summary row

Clothing · Shoes · Bags · Accessories · Jewelry · Home · Beauty

Under $50 · $50–100 · $100–200 · Over $200

Sidebar filter groups

Filter Dock

Sidebar filter groups (Category, Price, Tags) expand in place while keeping layout stable. No JS height measurement needed.

  • sidebar
  • filters
  • variable height

Accordion inspector

FAQ Stack

Request a reset link from the sign-in page and check your inbox.

Yes — share a workspace link from Settings → Team.

Annual billing is available from Billing → Switch to yearly.

Items
3
Expand
0.30s

The outer wrapper is display:grid, the inner content sits in one grid row, and the CSS transition handles the natural height without JS measurement.

css
.accordion-item { border-bottom: 1px solid rgba(148, 163, 184, 0.2); }

.accordion-trigger {
  display: flex;
  justify-content: space-between;
  padding: 14px 0;
  width: 100%;
  background: transparent;
  border: 0;
  cursor: pointer;
  color: inherit;
}

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

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

.accordion-panel__inner {
  overflow: hidden;
  min-height: 0;
}

.accordion-panel__inner > * {
  padding-bottom: 14px;
}

.accordion-chevron {
  transition: transform 0.30s ease;
}

.accordion-item[open] .accordion-chevron {
  transform: rotate(180deg);
  color: #7dd3fc;
}

@media (prefers-reduced-motion: reduce) {
  .accordion-panel, .accordion-chevron { transition: none; }
}