CssHow-ToBeginner · 3 min read

How to Use grid-template-areas in CSS for Layouts

Use grid-template-areas in CSS to name sections of a grid layout by defining a pattern of strings representing areas. Assign these area names to grid items using grid-area to place them visually in the grid. This method makes layout code easier to read and manage.

📐

Syntax

The grid-template-areas property defines named grid areas using strings. Each string represents a row, and each name inside the string represents a cell in that row. Use "." for empty cells. Assign these names to grid items with grid-area.

grid-template-areas: Defines the layout pattern with area names.
grid-area: Assigns a grid item to a named area.

css

.container {
  display: grid;
  grid-template-columns: 100px 100px 100px;
  grid-template-rows: 50px 50px;
  grid-template-areas: 
    "header header header"
    "sidebar content content";
}

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

💻

Example

This example shows a simple page layout with a header, sidebar, and main content area using grid-template-areas. The grid container defines the layout pattern, and each child is placed by its area name.

html

<!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>
  .container {
    display: grid;
    grid-template-columns: 150px 1fr 1fr;
    grid-template-rows: 60px 200px;
    grid-template-areas: 
      "header header header"
      "sidebar content content";
    gap: 10px;
    height: 300px;
    border: 2px solid #444;
  }
  .header {
    grid-area: header;
    background-color: #8ca0ff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    color: white;
  }
  .sidebar {
    grid-area: sidebar;
    background-color: #ffa08c;
    padding: 10px;
  }
  .content {
    grid-area: content;
    background-color: #8cffb0;
    padding: 10px;
  }
</style>
</head>
<body>
  <div class="container">
    <div class="header">Header</div>
    <div class="sidebar">Sidebar</div>
    <div class="content">Main Content</div>
  </div>
</body>
</html>

Output

A rectangular grid with a blue header spanning top row, an orange sidebar on bottom left, and a green main content area on bottom right.

⚠️

Common Pitfalls

Common mistakes when using grid-template-areas include:

Not matching the number of area names in each row string to the number of columns.
Using different area names with inconsistent spelling or casing.
Forgetting to assign grid-area to grid items, so they don't appear in the named areas.
Using reserved characters or spaces incorrectly inside area names.

Always ensure your area strings form a consistent grid pattern and that each grid item uses the exact area name.

css

.container {
  display: grid;
  grid-template-columns: 100px 100px;
  grid-template-rows: 50px 50px;
  /* Incorrect: rows have different number of area names */
  grid-template-areas: 
    "header header"
    "sidebar .";
}

/* Corrected version */
.container {
  grid-template-areas: 
    "header header"
    "sidebar content";
}

📊

Quick Reference

Tips for using grid-template-areas:

Use quotes for each row pattern.
Use consistent area names for cells in the same column across rows.
Use "." for empty cells.
Assign grid-area to each grid item matching the area name.
Keep area names simple and avoid spaces.

✅

Key Takeaways

Use grid-template-areas to visually name and arrange grid cells with strings representing rows.

Assign grid-area to grid items to place them in the named areas defined in the container.

Ensure each row string has the same number of area names matching the grid columns.

Use "." to mark empty grid cells in the layout pattern.

Keep area names consistent and simple to avoid layout errors.