CSS Dashboard Layout: Sidebar, Top Bar and Stat Cards

Dashboards are mostly layout: a fixed sidebar, a top bar and a content area full of cards. Grid does the structure, flexbox the details.

The finished layout

index.html

HTML

<style>
  :root { --bg: #f4f1ee; --card: #fff; --ink: #1c1b1f; --muted: #5c5750; --line: #e6ddd7; --brand: #d94a00; --side: #1a3a52; }
  *, *::before, *::after { box-sizing: border-box; }
  body { margin: 0; font-family: system-ui, sans-serif; color: var(--ink); background: var(--bg); }

  .app { display: grid; min-height: 100vh;
    grid-template-columns: 1fr;
    grid-template-areas: "top" "side" "main"; }
  @media (min-width: 560px) {
    .app { grid-template-columns: 9.5rem 1fr; grid-template-areas: "side top" "side main"; }
  }

  .side { grid-area: side; background: var(--side); color: #fff; padding: 14px; }
  .side h1 { font-size: 1.1rem; margin: 0 0 12px; }
  .side ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px; }
  @media (min-width: 560px) { .side ul { flex-direction: column; } }
  .side a { display: block; padding: 8px 10px; color: #fff; text-decoration: none; border-radius: 6px; font-size: .9375rem; }
  .side a:hover, .side a[aria-current="page"] { background: rgba(255,255,255,.15); }

  .top { grid-area: top; display: flex; justify-content: space-between; align-items: center; background: var(--card); padding: 10px 16px; border-bottom: 1px solid var(--line); }
  .avatar { width: 34px; height: 34px; border-radius: 50%; background: var(--brand); color: #fff; display: grid; place-items: center; font-size: .8rem; font-weight: 700; }

  .main { grid-area: main; padding: 16px; display: grid; gap: 14px; align-content: start; }
  .stats { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 8rem), 1fr)); }
  .card { background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 14px; }
  .stat .label { color: var(--muted); font-size: .8125rem; margin: 0; }
  .stat .value { font-size: 1.6rem; font-weight: 800; margin: 2px 0 0; }
  .panel h2 { margin: 0 0 10px; font-size: 1rem; }

  .bars { display: flex; align-items: flex-end; gap: 8px; height: 90px; }
  .bars span { flex: 1; background: var(--brand); border-radius: 4px 4px 0 0; opacity: .85; }
</style>
<div class="app">
  <aside class="side">
    <h1>Juniper</h1>
    <ul><li><a href="#" aria-current="page">Overview</a></li><li><a href="#">Orders</a></li><li><a href="#">Products</a></li><li><a href="#">Settings</a></li></ul>
  </aside>
  <header class="top"><strong>Overview</strong><span class="avatar" aria-hidden="true">MI</span></header>
  <main class="main">
    <section class="stats" aria-label="Key numbers">
      <div class="card stat"><p class="label">Orders today</p><p class="value">24</p></div>
      <div class="card stat"><p class="label">Visitors</p><p class="value">1,208</p></div>
      <div class="card stat"><p class="label">Returns</p><p class="value">2</p></div>
    </section>
    <section class="card panel">
      <h2>Orders this week</h2>
      <div class="bars" role="img" aria-label="Sample bar chart of orders per day, Monday to Friday"><span style="height:40%"></span><span style="height:65%"></span><span style="height:50%"></span><span style="height:90%"></span><span style="height:70%"></span></div>
    </section>
  </main>
</div>

All numbers are placeholders that stand in for real data.

How it is built

.app is a grid with named areas. Narrow: top bar, navigation, main. At 560px and above: the sidebar moves to its own column.
The sidebar navigation switches from a wrapping row to a column using flex-direction.
.stats is an auto-fit grid, so the number of columns adapts to the available width.
The bar chart is a flex row where the bars have percentage heights. It is only decoration here, with a text alternative. A real chart needs real data and a table or description for screen readers.

Make it yours

Add a fourth stat card and watch the grid reflow.
Make the sidebar sticky with position: sticky; top: 0; height: 100vh.
Add a dark theme by overriding the variables in prefers-color-scheme.

lightbulb

Where to go from here

When you can build all seven projects from scratch, you have a solid base in CSS for real projects. Keep the cheat sheet nearby.