Grid template areas in CSS - Mini Project: Build & Apply

Create a Simple Webpage Layout Using CSS Grid Template Areas

📖 Scenario: You are building a simple webpage layout with a header, sidebar, main content area, and footer. You want to arrange these sections visually using CSS Grid with named areas.

🎯 Goal: Build a webpage layout using CSS Grid and grid-template-areas to place the header, sidebar, main content, and footer in the correct positions.

📋 What You'll Learn

Use a container with CSS Grid display

Define grid template areas with names: header, sidebar, main, and footer

Assign each section to its grid area using grid-area

The layout should have the header spanning the top, sidebar on the left, main content on the right, and footer at the bottom

💡 Why This Matters

🌍 Real World

Web developers often use CSS Grid template areas to create clean, understandable layouts for websites and apps. This method helps organize content visually and semantically.

💼 Career

Knowing CSS Grid and template areas is essential for front-end developers to build responsive and maintainable web layouts efficiently.

1

Create the HTML structure with semantic elements

Write the HTML code to create a <div> with class container that contains four child elements: <header>, <aside>, <main>, and <footer>. Each child should have text content matching its tag name (e.g., "Header" inside <header>).

CSS

Need a hint?

Use semantic HTML tags inside the container div. Each section should have its name as text.

2

Set up the container as a CSS Grid and define grid template areas

In CSS, select the .container class and set display: grid;. Then add a grid-template-areas property with these exact values:
"header header"
"sidebar main"
"footer footer"

CSS

  Header
  Sidebar
  Main
  Footer



.container {
  /* Set display grid and grid-template-areas here */
}

Need a hint?

Use display: grid; and define grid-template-areas exactly as shown.

3

Assign grid areas to each section using grid-area

In the CSS, assign each child element a grid-area property with the exact names: header for header, sidebar for aside, main for main, and footer for footer.

CSS

  Header
  Sidebar
  Main
  Footer



.container {
  display: grid;
  grid-template-areas: 
    "header header"
    "sidebar main"
    "footer footer";
}
header {
  /* Add grid-area: header; */
}
aside {
  /* Add grid-area: sidebar; */
}
main {
  /* Add grid-area: main; */
}
footer {
  /* Add grid-area: footer; */
}

Need a hint?

Use grid-area with the exact area names for each section.

4

Add basic styling and set grid column and row sizes

In the CSS, add grid-template-columns: 10rem 1fr; and grid-template-rows: auto 1fr auto; to the .container. Also add a border of 1px solid black and padding of 1rem to each child element (header, aside, main, footer).

CSS

  Header
  Sidebar
  Main
  Footer



.container {
  display: grid;
  grid-template-areas: 
    "header header"
    "sidebar main"
    "footer footer";
  /* Add grid-template-columns and grid-template-rows here */
}
header, aside, main, footer {
  /* Add border and padding here */
}

Need a hint?

Set column widths and row heights on the container. Add border and padding to all four sections.