Skip to content

CSS Showcase · Live Demo

CSS Grid, six presets deep.

Swap between grid-template-columns, grid-template-areas, and auto-fit / auto-fill inside a device frame.

Grid playground

1
2
3
4
5
grid preset
styles.css
.grid {
  display: grid;
  grid-template-columns:
    repeat(auto-fit, minmax(80px, 1fr));
  gap: 6px;
}
/* Tracks stretch to fill remaining space. */

CSS features used

  • • grid-template-columns
  • • grid-template-areas
  • • minmax() + auto-fit
  • • auto-fill vs auto-fit
  • • grid-auto-flow: dense
  • • span / row-span

Every preset is real Grid — no JS layout math, no media queries for auto-fit.

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.