cssgridgenerator
Marketing sections

CSS Grid Stats Section Generator

A band of key numbers with dividers between them, from a 2x2 block on mobile to one row on desktop.

Open in
940px

Drag across the grid to draw an area. Arrow keys nudge, Shift + arrows resize.

space to pan · ⌘scroll to zoom
11fr21fr31fr41fr5
1auto2
stat-11 / 1 / 2 / 2
stat-21 / 2 / 2 / 3
stat-31 / 3 / 2 / 4
stat-41 / 4 / 2 / 5

Named areas. The CSS is a picture of the layout, and only the properties that actually change get repeated inside each media query.

.stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto;
  gap: 1px;
  grid-template-areas:
    "stat-1 stat-2"
    "stat-3 stat-4";
}

.stats > .stat-1 { grid-area: stat-1; }
.stats > .stat-2 { grid-area: stat-2; }
.stats > .stat-3 { grid-area: stat-3; }
.stats > .stat-4 { grid-area: stat-4; }

@media (min-width: 760px) {
  .stats {
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-template-rows: auto;
    grid-template-areas:
      "stat-1 stat-2 stat-3 stat-4";
  }
}

How this layout works

Two by two on mobile, four across on desktop. Four numbers in a single mobile row shrink the figures to the point where they stop being the loud thing on the page, which is their only job.

Draw the dividers with the gap, not with borders. A background colour on the grid container plus a 1px gap and opaque cells gives you hairlines that never double up at the corners.

Reserve the space for numbers that count up on scroll. A figure animating from 0 to 1,284 changes width as it goes; min-width: 4ch or font-variant-numeric: tabular-nums stops the row shuffling while it runs.

Every property used here is listed in the CSS Grid cheat sheet, with the reason to reach for it.

Frequently asked questions

How do I draw dividers between stats without doubling borders?
Use the gap. Give the grid container a background colour and a 1px gap, then make the cells opaque — the background shows through as hairlines that never double up or misalign at the corners.
Why does my stats row jump around while the numbers count up?
The digits are proportional, so the figure changes width as it animates. font-variant-numeric: tabular-nums fixes the character width, or reserve the space with min-width in ch.
How do I center a grid in CSS?
Use justify-content: center on the grid container to centre the whole grid inside it, and margin-inline: auto with a max-width to centre the container in the page. These are different jobs: the first moves the tracks within the container, the second moves the container itself.
How do I center items inside a CSS grid?
Set place-items: center on the container. That is shorthand for align-items plus justify-items, and it centres every item inside its own cell on both axes. For a single item, use place-self: center on that item instead.
How do I make a CSS grid responsive?
Use grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)) and it reflows at every width with no media queries at all. Add breakpoints only when the exact column count matters, or when the layout has to change shape rather than just wrap.
When should I use CSS Grid instead of Flexbox?
Use Grid when things must line up in two directions at once, and Flexbox when content flows along one axis. A page skeleton or dashboard is Grid; a navbar or row of buttons is Flexbox. They nest: Grid for the page, Flexbox inside the cells.

How to use it

  1. Open the pattern

    The stats band loads into the editor already responsive, with every breakpoint set up.

  2. Change the tracks

    Edit the column and row sizes in the Tracks panel. Anything valid in a track list works.

  3. Redraw at another width

    Move the ruler past a breakpoint marker and rearrange. Only the placement changes.

  4. Copy the code

    Take CSS, HTML, Tailwind or a shadcn component. The media queries are already written.

More in Marketing sections

Elsewhere in the library

Browse all 46 layout patterns →

Related tools

Every generator here writes CSS you can paste straight into a project.