Grid template areas in CSS

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>

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.

Practice

1. What does the grid-template-areas property do in CSS Grid?

easy

A. It names areas of the grid to place items easily.

B. It sets the colors of grid cells.

C. It defines the size of grid gaps.

D. It controls the font size inside grid items.

Solution

1. Step 1: Understand the purpose of grid-template-areas

   This property lets you assign names to parts of the grid layout, making it easier to place items by referring to those names.

2. Step 2: Compare with other grid properties

   Other properties like gap or font size do not name areas; they control spacing or style, so they are not correct here.

3. Final Answer:

   It names areas of the grid to place items easily. -> Option A

4. Quick Check:

   grid-template-areas = names grid parts [OK]

Hint: Remember: areas = named parts of grid layout [OK]

Common Mistakes:

• Confusing grid-template-areas with grid-gap
• Thinking it sets colors or fonts
• Mixing it up with grid-template-columns

2. Which of the following is the correct syntax for defining grid-template-areas with two rows and three columns?

easy

A. grid-template-areas: ['header' 'header' 'header'] ['main' 'main' 'sidebar'];

B. grid-template-areas: header header header; main main sidebar;

C. grid-template-areas: "header header header" "main main sidebar";

D. grid-template-areas: ("header header header", "main main sidebar");

Solution

1. Step 1: Check the syntax format

   The correct syntax uses quoted strings for each row, separated by spaces for columns, all inside the property value.

2. Step 2: Identify correct quotes and separators

   grid-template-areas: "header header header" "main main sidebar"; uses double quotes around each row and spaces between area names, which is correct. Other options use incorrect brackets or missing quotes.

3. Final Answer:

   grid-template-areas: "header header header" "main main sidebar"; -> Option C

4. Quick Check:

   Quotes per row, spaces per column [OK]

Hint: Use quotes for each row, spaces for columns [OK]

Common Mistakes:

• Omitting quotes around rows
• Using brackets instead of quotes
• Separating rows with commas or semicolons incorrectly

3. Given this CSS:

  .container {
    display: grid;
    grid-template-columns: 1fr 2fr 1fr;
    grid-template-areas:
      "nav nav nav"
      "sidebar main main";
  }
  .nav { grid-area: nav; }
  .sidebar { grid-area: sidebar; }
  .main { grid-area: main; }

What will be the layout of the grid areas?

medium

A. The nav, sidebar, and main all overlap in the first row.

B. The nav is only in the first column; sidebar and main share the second row equally.

C. The nav is in the last column; sidebar spans all columns in second row.

D. The nav spans all three columns in the first row; sidebar is left in second row; main spans two columns on right in second row.

Solution

1. Step 1: Analyze grid-template-areas rows

   The first row is "nav nav nav", so nav covers all three columns in row one. The second row is "sidebar main main", so sidebar is in first column, main spans second and third columns.

2. Step 2: Match grid-area assignments

   Each class uses grid-area matching the names in template areas, so items appear in those named spots.

3. Final Answer:

   The nav spans all three columns in the first row; sidebar is left in second row; main spans two columns on right in second row. -> Option D

4. Quick Check:

   Named areas match layout positions [OK]

Hint: Repeat area names in quotes to span columns [OK]

Common Mistakes:

• Assuming nav only covers one column
• Mixing up row and column spans
• Ignoring repeated area names for spanning

4. Identify the error in this CSS snippet:

  .container {
    display: grid;
    grid-template-areas:
      "header header header"
      "content sidebar";
  }
  .header { grid-area: header; }
  .content { grid-area: content; }
  .sidebar { grid-area: sidebar; }

medium

A. The grid-template-areas rows have different numbers of columns.

B. Missing grid-template-columns property.

C. The grid-area names do not match the template areas.

D. Using double quotes instead of single quotes.

Solution

1. Step 1: Count columns in each grid-template-areas row

   The first row "header header header" has 3 area names (columns). The second row "content sidebar" has 2 area names. Mismatch!

2. Step 2: Verify the rule

   All rows in grid-template-areas must have the same number of area names to define consistent columns.

3. Step 3: Check other options

   B: grid-template-columns is implicitly created by areas. C: Names match exactly. D: Double quotes are valid.

4. Final Answer:

   The grid-template-areas rows have different numbers of columns. -> Option A

5. Quick Check:

   Same # areas per row [OK]

Hint: Every row must have identical number of area names [OK]

Common Mistakes:

• Assuming rows have same columns without counting
• Thinking missing grid-template-columns is the error
• Believing quote type causes issues

5. You want a grid layout with three rows and three columns. The top row is a header spanning all columns. The middle row has a sidebar on the left and main content spanning the other two columns. The bottom row is a footer spanning all columns. Which grid-template-areas value correctly defines this layout?

hard

A. "header sidebar main" "header sidebar main" "footer footer footer"

B. "header header header" "sidebar main main" "footer footer footer"

C. "header header header" "main main sidebar" "footer footer footer"

D. "header header" "sidebar main main" "footer footer footer"

Solution

1. Step 1: Understand the layout requirements

   Top row: header spans all 3 columns. Middle row: sidebar left (1 column), main content spans 2 columns on right. Bottom row: footer spans all 3 columns.

2. Step 2: Match the grid-template-areas string

   "header header header" "sidebar main main" "footer footer footer" matches exactly: first row "header header header" (3 columns), second row "sidebar main main" (sidebar left, main spans 2 columns), third row "footer footer footer" (footer spans all columns).

3. Step 3: Check other options for errors

   "header sidebar main" "header sidebar main" "footer footer footer" splits header and sidebar in first row, which is wrong. "header header header" "main main sidebar" "footer footer footer" swaps main and sidebar positions. "header header" "sidebar main main" "footer footer footer" has only 2 columns in first row, inconsistent with 3 columns.

4. Final Answer:

   "header header header" "sidebar main main" "footer footer footer" -> Option B

5. Quick Check:

   Repeat area names to span columns correctly [OK]

Hint: Repeat area names in quotes to span columns properly [OK]

Common Mistakes:

• Mismatching number of columns per row
• Swapping sidebar and main positions
• Not repeating area names to span columns