⊞CSS Grid Complete Guide
← Real-World Layouts

📊 Admin Dashboard

A typical admin dashboard layout with KPI stat cards, a main analytics chart, a secondary chart, a user list widget, and a full-width data table. Uses a 12-column grid for maximum flexibility.

repeat(12, 1fr)grid-column: span Ngrid-auto-rowsminmax()

1. Full Dashboard Layout

A 12-column grid where each widget declares how many columns it spans. Stats always span 3 (= 4 per row), the chart spans 8 + sidebar 4, the table spans all 12.

Live Demo
Revenue$48.2k
💰
+12% vs last month
Users3,240
👤
+8% vs last month
Orders892
🛒
-3% vs last month
Rating4.87
⭐
+0.2% vs last month
Revenue Over Time
Jan – Dec 2025
1M3MYTD1Y
JanMarMayJulSepNov
Traffic Sources
Organic45%
Direct28%
Social17%
Email10%
Recent Orders
View all →
Customer
Product
Amount
Status
Date
Alice Johnson
Sneakers Pro
$89
✅ Paid
May 26
Bob Smith
Designer Bag
$149
⏳ Pending
May 25
Carol White
Smart Watch
$299
✅ Paid
May 25
Dave Brown
Sunglasses
$65
🚚 Shipped
May 24
CSS
.dashboard {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-auto-rows: minmax(60px, auto);
  gap: 1rem;
}

/* 4 stat cards in a row */
.stat   { grid-column: span 3;  }

/* Main chart */
.chart  { grid-column: span 8;  }

/* Secondary widget */
.widget { grid-column: span 4;  }

/* Full-width table */
.table  { grid-column: span 12; }
💡 A 12-column grid is the most flexible choice for dashboards — it divides evenly by 2, 3, 4, and 6, letting you create any proportion of widgets.

2. Responsive Dashboard Grid

On smaller screens, stack everything into fewer columns. Use clamp() to keep the 12-column system but have it scale down gracefully.

Live Demo
Wide (12 cols) — stats in a row
Revenue
Users
Orders
Rating
Chart
Widget
Table (full width)
Tablet (6 cols) — 2 stats per row
Revenue
Users
Orders
Rating
Chart
Widget
Table
CSS
.dashboard {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 1rem;
}
.stat  { grid-column: span 3;  }
.chart { grid-column: span 8;  }

@media (max-width: 960px) {
  .dashboard { grid-template-columns: repeat(6, 1fr); }
  .stat      { grid-column: span 3; }
  .chart     { grid-column: span 4; }
}

@media (max-width: 600px) {
  .dashboard { grid-template-columns: 1fr; }
  .stat,
  .chart,
  .widget,
  .table    { grid-column: span 1; }
}
💡 The key insight: by using a 12-column system, you never need to change the widget span values — just change how many columns the grid has at each breakpoint.