TaskBuild the dashboard. .dashboard: display: grid, grid-template-columns: 200px 1fr, grid-template-rows: 60px 1fr 40px, grid-template-areas: 'top top' 'sidebar main' 'footer footer', min-height: 320px, gap: 8px. .top { grid-area: top; background: #18181B; color: white; }. .sidebar { grid-area: sidebar; background: #f5f5f5; }. .main { grid-area: main; }. .footer { grid-area: footer; background: #18181B; color: white; }. Inside .main, .cards has display: grid, grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)), gap: 12px. Four .card divs in .cards, each padding 16px, background #eef, border-radius 8px.
Module capstone: dashboard in 20 lines
200 XP14 min
Theory
Putting B3 together
A typical SaaS dashboard layout β built with grid-template-areas + auto-fit cards inside main. Same layout in Bootstrap 3 was ~200 lines of nested rows/cols. Here it's ~20.
The structure:
- Topbar (full width)
- Sidebar (left, fixed 200px)
- Main (fluid; contains a responsive card grid)
- Footer (full width)
Plus the inner card grid uses auto-fit + minmax so cards reflow at any screen width.
This capstone combines B3 lessons 4 (repeat), 5 (placement via grid-area), 6 (template-areas), 8 (auto-fit + minmax), 9 (place-items).
π
Sign up to start coding
Theory is open to everyone. The interactive editor, live preview, and check are unlocked with a 7-day free trial β card required, cancel anytime.
Sign up β free trial βFirst 10 lessons in each track are free. No card needed for those.