0
0
CSSmarkup~5 mins

Grid template areas in CSS

Choose your learning style9 modes available
LearnWhyDeepRenderTryChallengeProjectRecallPerf
Introduction

Grid template areas help you arrange parts of a webpage in named sections. It makes layout easy to understand and change.

When you want to divide a page into clear sections like header, sidebar, and footer.
When you want to change layout easily by just changing area names.
When you want your CSS to be readable and organized.
When you want to place items in a grid without counting rows and columns.
When you want a responsive design that rearranges areas on different screen sizes.
Syntax
CSS
grid-template-areas: 
  "header header header";
  "sidebar main main";
  "footer footer footer";

Each string represents a row in the grid.

Each name inside quotes is an area. Use a dot (.) for empty cells.

Examples
This creates a grid with three rows and three columns. The first row is all 'nav'. The second row has 'content' in first two columns and 'sidebar' in the last. The last row is all 'footer'.
CSS
grid-template-areas: 
  "nav nav nav"
  "content content sidebar"
  "footer footer footer";
A simpler grid with two columns and three rows. Header and footer span both columns.
CSS
grid-template-areas: 
  "header header"
  "main sidebar"
  "footer footer";
Dots mean empty cells. Header and footer are centered in the top and bottom rows.
CSS
grid-template-areas: 
  ". header ."
  "sidebar main main"
  ". footer .";
Sample Program

This example shows a page layout with a header, sidebar, main content, ads, and footer. The grid-template-areas define where each part goes. On small screens, the layout changes to a single column for easier reading.

CSS
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Grid Template Areas Example</title>
<style>
  body {
    margin: 0;
    font-family: Arial, sans-serif;
  }
  .container {
    display: grid;
    grid-template-columns: 1fr 3fr 1fr;
    grid-template-rows: auto 1fr auto;
    grid-template-areas: 
      "header header header"
      "sidebar main ads"
      "footer footer footer";
    gap: 1rem;
    height: 100vh;
    padding: 1rem;
    box-sizing: border-box;
  }
  header {
    grid-area: header;
    background-color: #4a90e2;
    color: white;
    padding: 1rem;
    text-align: center;
  }
  aside.sidebar {
    grid-area: sidebar;
    background-color: #d9e8fb;
    padding: 1rem;
  }
  main {
    grid-area: main;
    background-color: #f0f4f8;
    padding: 1rem;
  }
  aside.ads {
    grid-area: ads;
    background-color: #d9e8fb;
    padding: 1rem;
  }
  footer {
    grid-area: footer;
    background-color: #4a90e2;
    color: white;
    padding: 1rem;
    text-align: center;
  }
  @media (max-width: 600px) {
    .container {
      grid-template-columns: 1fr;
      grid-template-rows: auto auto auto auto auto;
      grid-template-areas: 
        "header"
        "main"
        "sidebar"
        "ads"
        "footer";
    }
  }
</style>
</head>
<body>
  <div class="container">
    <header>Header</header>
    <aside class="sidebar">Sidebar</aside>
    <main>Main Content</main>
    <aside class="ads">Ads</aside>
    <footer>Footer</footer>
  </div>
</body>
</html>
OutputSuccess
Important Notes

Area names must be quoted strings and match exactly in CSS and HTML.

Use dots (.) for empty spaces in the grid.

Grid areas make your CSS easier to read and maintain.

Summary

Grid template areas let you name parts of your layout for easy placement.

You write rows as strings with area names inside quotes.

This method helps create clear, flexible, and responsive page layouts.