Admin Dashboard Layout

Project: design a responsive admin dashboard shell with summary metrics, a recent-activity area and a clear heading.

Start with semantic sections: page header, key metrics, recent activity and related actions. Grid is well suited for a set of equal-width metric cards and for wide layouts with secondary columns.

Numbers and dates in these examples are illustrative. A real dashboard needs trustworthy data, loading/error states and often a backend; CSS alone only creates the presentation.

Metrics use auto-fit Grid to change column count. The activity feed stays below the cards so it remains readable even on a phone.

Show three metrics with simple cards.

HTML

<main class="dashboard"><h2>Team overview</h2><section class="metrics" aria-label="Key metrics"><article><span>Orders</span><strong>248</strong></article><article><span>Messages</span><strong>32</strong></article><article><span>Open tasks</span><strong>14</strong></article></section></main>

CSS

.dashboard { padding: 17px; border-radius: 12px; background: #f1f5f9; } .dashboard h2 { margin-top: 0; } .metrics { display: grid; grid-template-columns: repeat(auto-fit,minmax(min(100%,130px),1fr)); gap: 10px; } .metrics article { padding: 16px; background: white; border: 1px solid #e2e8f0; border-radius: 8px; } .metrics span { display: block; color: #475569; } .metrics strong { display: block; font-size: 26px; margin-top: 8px; }

Rendered output

Observe: Metric cards reflow into fewer columns without losing their labels.

Add an activity feed and a concise summary action.

HTML

<main class="dashboard"><header class="dash-head"><div><h2>Team overview</h2><p>Today at a glance</p></div><a href="#reports">View reports</a></header><section class="metrics" aria-label="Key metrics"><article><span>Orders</span><strong>248</strong><small>Today</small></article><article><span>Messages</span><strong>32</strong><small>Unread</small></article><article><span>Open tasks</span><strong>14</strong><small>In progress</small></article></section><section class="activity"><h3>Recent activity</h3><ul><li>New order received</li><li>Weekly summary published</li><li>Team task assigned</li></ul></section></main>

CSS

.dashboard { --surface:#fff; padding: clamp(14px,3vw,25px); background: #f1f5f9; border-radius: 13px; font-family: Arial,sans-serif; } .dash-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px; } .dash-head h2 { margin: 0; } .dash-head p { margin: 5px 0 0; color: #64748b; } .dash-head a { color: #1d4ed8; font-weight: 700; } .metrics { display: grid; grid-template-columns: repeat(auto-fit,minmax(min(100%,135px),1fr)); gap: 11px; margin-block: 18px; } .metrics article { min-width: 0; padding: 15px; border: 1px solid #e2e8f0; background: white; border-radius: 9px; } .metrics span, .metrics small { display: block; color: #475569; } .metrics strong { display: block; margin: 8px 0 5px; font-size: 26px; } .activity { background: white; padding: 16px; border-radius: 9px; } .activity h3 { margin: 0 0 10px; } .activity ul { padding-left: 20px; line-height: 1.8; margin-bottom: 0; }

Rendered output

Observe: The finished dashboard shows accessible metric labels and a readable activity region, with no fixed columns.

Metrics use auto-fit Grid to change column count. The activity feed stays below the cards so it remains readable even on a phone.

Compare the two examples: identify the selector, each changed property, and which visible part of the output proves that the CSS took effect.

• Visual KPI cards must not imply that sample data is live.

• Never indicate success or failure using only green/red background colors.

Use this checklist to assess the completed CSS project:

• Metrics carry readable labels.
• The metric grid adjusts to narrow widths.
• Sample values are clearly illustrative, not represented as live.

Add a fourth metric, then create a wide-screen two-column layout with activity and announcements.

Before changing the code, predict what will change. Then verify by checking the rendered result.

Use semantic regions and adaptive card layouts before adding real dashboard data and interactions.

Revisit the rendered examples if the rule still feels abstract. Change one declaration at a time so you can connect cause and effect.