Sidebar and header

CSS course · Advanced · Lesson 44/52

Build the sidebar and header layout with grid.

Panel skeleton with CSS grid

A sales dashboard typically has three regions: sidebar, header and main. We place them side by side and stacked using display: grid.

Grid defines columns and rows up front; then each item is placed into a grid area. This way, regardless of HTML order, the visual layout is decided in CSS.

Three regions with grid-template-areas

To place three regions we use grid-template-columns, grid-template-rows and grid-template-areas together. In the areas value, each row is a string and each word is an area name:

.dashboard {
  display: grid;
  grid-template-columns: 220px 1fr;
  grid-template-rows: 60px 1fr;
  grid-template-areas:
    "sidebar header"
    "sidebar main";
}

Here sidebar spans both rows; header and main sit side by side.

Sidebar and header styles

After placing the regions we give each one basic styles. The sidebar gets a dark background, the header gets a panel title and a thin underline. For now we hardcode colors; later we'll move them into var() variables.

The main region fills the rest of the panel and stays light.

Exercise Build the panel skeleton: .dashboard + three regions

Add a .dashboard block to the stylesheet. Set display: grid, define two columns (220px 1fr) and two rows (60px 1fr), and use grid-template-areas to lay out sidebar, header and main. Then add grid-area declarations for the .sidebar, .header and .main selectors.

Show example solution

/* Sales Dashboard stylesheet */

:root {
  --bg: #f5f7fa;
  --card-bg: #ffffff;
}

.dashboard {
  display: grid;
  grid-template-columns: 220px 1fr;
  grid-template-rows: 60px 1fr;
  grid-template-areas:
    "sidebar header"
    "sidebar main";
}

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

Test yourself

How do we separate rows in the grid-template-areas value?
- With a comma
- By wrapping each row in quotes
- With a semicolon
- With a dash
Show answer

By wrapping each row in quotes — Correct. Each row is wrapped in double quotes; rows are separated by whitespace.
Place the .header block into the header area
```
.header {
  ____;
}
```
Show answer
```
.header {
  grid-area: header;
}
```
Match each grid declaration to its purpose

display: grid

grid container
grid-template-columns

column widths
grid-template-areas

area name map
grid-area

place item in area

All lessons in Advanced

1 Animations

2 Gradients

3 Filters and blend

4 Modern layout

5 Writing modes and logical properties

6 Accessible CSS

7 Print and paged media

8 Project: Dashboard UI

9 Advanced final