CSS Showcase · Live Demo

Cards that reflow.

A single card list that becomes an auto-fit grid on desktop, horizontal media cards on iPad, and a snap-scroll carousel on mobile.

Featured demo

mobile · stacked

Ship the first public build with core flows covered.

2 min read

Collect structured feedback from early adopters.

4 min read

Gradually expand access across regions.

3 min read

Track retention and activation cohorts.

5 min read

mobile design patterns

cards-stacked.css

/* Full-width stacked cards */
.cards[data-pattern="stacked"] {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.75rem;
}

CSS features used