Skip to content

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

Alpha release

Ship the first public build with core flows covered.

2 min read

Beta feedback

Collect structured feedback from early adopters.

4 min read

Gamma rollout

Gradually expand access across regions.

3 min read

Delta metrics

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

  • • grid-template-columns: auto-fit
  • • minmax() sizing
  • • grid-column / grid-row spans
  • • scroll-snap-type
  • • line-clamp
  • • Semantic tokens

CSS Showcase · Share

Share this demo as a 1:1 image

A 2048×2048 PNG with the live current view, the title, and the CSS features — for social posts, docs, and READMEs.

The snapshot follows the device selected on the page — switch between desktop, iPad, and mobile above and the card updates.