v145 · css

Dashboard Cards

A card grid built with column-wrap and column-height instead of CSS Grid. Adjust the column count and height cap — when cards overflow a column they automatically wrap to a new row, with no JavaScript measurement.

Feature detection: checking…
column-count
column-height: 200px
column-wrap
Analytics dashboard column-wrap: wrap — cards flow across rows
Page views
1.24M
↑ 12.3% this month
Unique users
87.4K
↑ 8.1%
Conversion
3.8%
↑ 0.3pp
Revenue
$48.7K
↑ $4.2K vs last period
Bounce rate
34%
↓ 2.4pp improvement
Session duration
2m 44s
↑ 18s
New users
22.1K
↑ 5.2%
Errors
0.12%
↓ 0.04pp

grid vs multicol approach

CSS Grid — fixed column widths
Stat A
Stat B
Stat C
Stat D
Stat E
Stat F

Grid gives equal-width cells. Cards can't overflow into the next row naturally.

Multicol wrap — content-driven rows
Stat A
Stat B
Stat C
Stat D
Stat E
Stat F

Multicol wraps content naturally. Columns fill to height cap, then start a new row.

/* Card grid using column wrapping — no JS measurement needed */
.card-container {
  column-count: 3;
  column-height: 200px;  /* cap per column row */
  column-wrap: wrap;     /* new row when full */
  column-gap: 1rem;
}

/* Cards don't split across column boundaries */
.card {
  break-inside: avoid;
  display: inline-block;
  width: 100%;
  box-sizing: border-box;
}

see also