TaskBuild the dashboard. .layout { display: grid; grid-template-columns: 1fr; min-height: 100vh; min-height: 100svh; max-width: min(100%, 1400px); margin-inline: auto; padding: clamp(1rem, 3vw, 2rem); gap: 20px; } @media (min-width: 720px) { .layout { grid-template-columns: 240px 1fr; } }. .sidebar { background: #f5f5f5; padding-inline: 16px; padding-block: 20px; border-radius: 12px; }. .main { container-type: inline-size; }. .main h1 { font-size: clamp(1.5rem, 4vw, 2.25rem); }. .cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; margin-block: 16px; }. .card { padding: 16px; background: #eef; border-radius: 8px; transition: transform 0.15s; }. @media (hover: hover) { .card:hover { transform: translateY(-2px); } }. .chart { aspect-ratio: 16/9; background: #d4e8ff; border-radius: 8px; margin-block-start: 16px; display: grid; place-items: center; }. Body has 4 cards + chart inside main + sidebar.
Module capstone: dashboard responsive without breakpoint hell
200 XP14 min
Theory
Putting B6 together
Build a fully responsive dashboard layout using EVERY B6 concept:
- B6-01: Fluid clamp() padding instead of media-query padding overrides.
- B6-02: @container for the card component (responds to parent, not viewport).
- B6-03: clamp() for h1 font-size and main padding.
- B6-04: aspect-ratio on the chart placeholder.
- B6-05: min() for the container max width.
- B6-06: 100svh for the page minimum height.
- B6-07: @media (hover: hover) for card lift on desktop only.
- B6-08: auto-fit grid for the card row inside main.
- B6-09: Logical properties (margin-inline, padding-block) throughout.
- B6-11: Exactly ONE @media breakpoint (720px) for sidebar appearance.
End result: a dashboard that adapts perfectly from 320px to 1920px with one breakpoint and one container.
π
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.