How to create dashboard layout with grid in css

CssHow-ToBeginner · 4 min read

How to Create Dashboard Layout with CSS Grid

Use display: grid on a container and define grid areas with grid-template-areas to create sections like header, sidebar, main content, and footer. Assign each child element to a grid area using grid-area for a clean dashboard layout.

📐

Syntax

To create a grid layout, set display: grid on the container. Use grid-template-columns and grid-template-rows to define the size of columns and rows. Use grid-template-areas to name areas of the grid. Assign child elements to these areas with grid-area.

display: grid; - activates grid layout
grid-template-columns - sets column widths
grid-template-rows - sets row heights
grid-template-areas - names layout areas
grid-area - assigns elements to named areas

css

.container {
  display: grid;
  grid-template-columns: 200px 1fr;
  grid-template-rows: 60px 1fr 40px;
  grid-template-areas: 
    "header header"
    "sidebar main"
    "footer footer";
  height: 100vh;
}

header { grid-area: header; }
sidebar { grid-area: sidebar; }
main { grid-area: main; }
footer { grid-area: footer; }

💻

Example

This example shows a simple dashboard with a header, sidebar, main content area, and footer using CSS Grid. The sidebar is fixed width, the main area fills the rest, and the header and footer span full width.

html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Dashboard Layout with CSS Grid</title>
<style>
  body, html {
    margin: 0;
    height: 100%;
    font-family: Arial, sans-serif;
  }
  .container {
    display: grid;
    grid-template-columns: 220px 1fr;
    grid-template-rows: 60px 1fr 50px;
    grid-template-areas:
      "header header"
      "sidebar main"
      "footer footer";
    height: 100vh;
    gap: 10px;
    background: #f0f0f0;
  }
  header {
    grid-area: header;
    background: #004080;
    color: white;
    display: flex;
    align-items: center;
    padding-left: 20px;
    font-size: 1.2rem;
  }
  aside {
    grid-area: sidebar;
    background: #0066cc;
    color: white;
    padding: 20px;
  }
  main {
    grid-area: main;
    background: white;
    padding: 20px;
    overflow-y: auto;
  }
  footer {
    grid-area: footer;
    background: #004080;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
  }
</style>
</head>
<body>
  <div class="container">
    <header>Dashboard Header</header>
    <aside>Sidebar Menu</aside>
    <main>
      <h1>Welcome to the Dashboard</h1>
      <p>This is the main content area.</p>
    </main>
    <footer>© 2024 Company Name</footer>
  </div>
</body>
</html>

Output

A full browser window with a blue header bar on top, a blue sidebar on the left, a white main content area on the right, and a blue footer bar at the bottom. The layout uses grid with clear sections and spacing.

⚠️

Common Pitfalls

Common mistakes when creating dashboard layouts with CSS Grid include:

Not setting display: grid on the container, so grid properties don't work.
Forgetting to assign grid-area names to child elements matching the grid-template-areas.
Using fixed heights without considering viewport height, causing overflow or scroll issues.
Not adding gaps or padding, making the layout look cramped.

Always check your grid area names match exactly and test responsiveness.

css

/* Wrong: Missing display grid */
.container {
  grid-template-columns: 200px 1fr;
  grid-template-areas: "header header" "sidebar main";
}

/* Right: Add display grid */
.container {
  display: grid;
  grid-template-columns: 200px 1fr;
  grid-template-areas: "header header" "sidebar main";
}

📊

Quick Reference

Use this quick guide when building dashboard layouts with CSS Grid:

display: grid; — activate grid layout
grid-template-columns: set column widths (e.g., fixed + flexible)
grid-template-rows: set row heights
grid-template-areas: name layout sections
grid-area: assign elements to named areas
gap: add space between grid cells
height: 100vh; make container fill viewport height

✅

Key Takeaways

Use display: grid and grid-template-areas to define dashboard sections clearly.

Assign each child element a grid-area matching the template for proper placement.

Set container height to 100vh for full viewport coverage and add gaps for spacing.

Check spelling of grid-area names to avoid layout errors.

Test your layout on different screen sizes for responsiveness.