01LearnForge

Library / Frontend

Building a Responsive Dashboard with CSS Grid

Learn to create a flexible and responsive dashboard layout using CSS Grid's powerful template areas and structural properties, suitable for various screen sizes.

by codewithfaith001·Intermediate·2 min·⑂ 0 remixes

Want your own version of this lesson, tailored to your level?

⑂ Generate my version

What this lesson teaches, step by step

01Define the Dashboard's HTML Elements
0:00
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>CSS Grid Dashboard</title><link rel="stylesheet" href="style.css"></head><body><div class="dashboard"><header class="header">Dashboard Header</header><aside class="sidebar">Navigation</aside><main class="main-content">Main Content Area</main></div></body></html>

We start by setting up a basic HTML page with a `div` containing our main layout components: a header, a sidebar, and a main content area. This provides the semantic structure that CSS Grid will later arrange into our desired dashboard layout. We also link to an external stylesheet where our grid magic will happen.

02Set up the Grid Container
4:00
body {  margin: 0;  font-family: sans-serif;  min-height: 100vh;}.dashboard {  display: grid;  grid-template-columns: 200px 1fr;  grid-template-rows: 60px 1fr;  gap: 10px;  min-height: 100vh;}

First, we remove default body margins and ensure our dashboard fills the viewport's height. Then, we transform the `.dashboard` div into a grid container using `display: grid`. We define our columns and rows: a 200px sidebar and a flexible main column, plus a 60px header row and a flexible main row. `gap` adds space between grid items.

03Structure Layout with Grid Template Areas
8:00
.dashboard {  display: grid;  grid-template-columns: 200px 1fr;  grid-template-rows: 60px 1fr;  gap: 10px;  min-height: 100vh;  grid-template-areas:    "header header"    "sidebar main";}

To make our layout more readable and easier to manage, we introduce `grid-template-areas`. This property allows us to name regions of our grid, visually representing the layout directly in our CSS. Here, `header` spans both columns, while `sidebar` and `main` occupy their respective grid cells below the header.

04Assign Components to Grid Areas
12:00
.header {  grid-area: header;  background-color: #3f51b5;  color: white;  padding: 15px;}.sidebar {  grid-area: sidebar;  background-color: #e0e0e0;  padding: 15px;}.main-content {  grid-area: main;  background-color: #f5f5f5;  padding: 15px;}

Now that we've defined our grid areas, we use the `grid-area` property on our HTML elements to place them into the named regions. The `header` goes into the `header` area, `sidebar` into `sidebar`, and `main-content` into `main`. We also add some basic background colors and padding to visually distinguish each section and make the layout apparent.

05Make the Dashboard Responsive
16:00
@media (max-width: 768px) {  .dashboard {    grid-template-columns: 1fr;    grid-template-rows: 60px 150px 1fr;    grid-template-areas:      "header"      "sidebar"      "main";  }}

For smaller screens, we want a single-column layout. Using a media query, we redefine `grid-template-columns` to be just `1fr`, stacking all content. We also adjust `grid-template-rows` to give the sidebar a specific height and redefine `grid-template-areas` to reflect this new vertical arrangement, ensuring a better user experience on mobile devices.

Comments