v139 · css
Dashboard Grid
A data dashboard where column-rule and row-rule draw the visual separators between panels — zero borders in the markup. Switch rule style to see how dashed, double, or coloured rules change the density feel without touching card markup.
Feature detection: checking…
column-rule
Page views
1.24M
↑ 12.3% vs last month
Unique users
87.4K
↑ 8.1%
Bounce rate
34.2%
↓ 2.4pp improvement
Revenue (USD) — last 7 weeks
$48.7K
↑ $4.2K vs prev period
Conversion
3.8%
↑ 0.3pp
Top pages this week
| Page | Views | Avg time | Exits |
|---|---|---|---|
| /features | 24,810 | 2m 14s | 18% |
| /v138/ | 18,440 | 3m 02s | 22% |
| /v139/css-gap-decorations/ | 12,330 | 4m 18s | 15% |
| /v137/ | 9,720 | 2m 44s | 24% |
| / | 8,100 | 1m 30s | 31% |
No borders in markup. Every visual separator you see comes from
column-rule and row-rule on the grid container. The individual .stat-card elements have no border declarations — zero risk of doubled edges or layout impact from decoration.
.db-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1.5rem;
/* Decorative separators — no layout impact */
column-rule: 1.5px solid #1a1a1a;
row-rule: 1.5px solid #1a1a1a;
}
/* Theme variant */
.db-grid[data-theme="coloured"] {
column-rule: 2px solid var(--accent-blue);
row-rule: 1px solid var(--accent-emerald);
}