CSS Grid Areas: Area Templates and Positioning Items

Master CSS Grid areas. Learn how to map layout structures using grid-template-areas and place items using grid-area keywords.

Introduction

Defining columns and rows with pixel sizes or fractional units creates a grid layout, but how do you place elements inside that grid? By default, the browser places elements in order, loading items into grid cells one by one.

To create custom structures (such as a sidebar spanning the entire height while the header spans across the top columns), you need to position items manually. CSS Grid provides two main methods to do this: positioning items by Grid Line Numbers or mapping a layout visually using named Grid Areas. Designing layouts with named areas makes your CSS code highly readable and easy to adapt for responsive screens.

What You Will Learn

Placing items using Grid Line coordinates (grid-column, grid-row).
Mapping layouts visually using grid-template-areas.
Positioning elements using named grid-area references.
Creating empty cell spaces inside template maps.
Restructuring responsive layouts using media queries.

Prerequisites

CSS Grid Introduction: Tracks, Gaps, and Fractional Units

Method 1: Grid Line Numbers

Every grid has numbered lines separating the tracks. For a grid with 3 columns, there are 4 column lines:

Line 1           Line 2           Line 3           Line 4
  |    Column 1    |    Column 2    |    Column 3    |

You can position elements by specifying which line they start and end on:

grid-column-start / grid-column-end: Shorthand: grid-column: start / end;
grid-row-start / grid-row-end: Shorthand: grid-row: start / end;
The Span Keyword: Instead of calculating line numbers, use span to declare how many tracks an element should occupy (e.g. grid-column: span 2;).

.main-header {
  /* Span across columns from line 1 to line 4 */
  grid-column: 1 / 4; 
}

Method 2: Named Grid Areas (Recommended)

Grid template areas allow you to name sections of your grid and place items using those names. This maps your layout visually in your CSS file.

1. Declaring the Template Map (`grid-template-areas`)

Define the template map on the parent container. Use double quotes to define each row, and write the area names inside the quotes:

.page-skeleton {
  display: grid;
  grid-template-columns: 250px 1fr;
  grid-template-rows: 80px 1fr 60px;
  
  /* Map grid cells to area names */
  grid-template-areas:
    "header  header"
    "sidebar main  "
    "footer  footer";
}

2. Placing Items (`grid-area`)

Assign the named areas to the child elements using the grid-area property:

.app-header {
  grid-area: header;
}

.app-sidebar {
  grid-area: sidebar;
}

.app-main {
  grid-area: main;
}

.app-footer {
  grid-area: footer;
}

3. Creating Empty Cells

To leave a cell empty in your template area map, use a dot (.) character instead of a name:

grid-template-areas:
  "header header header"
  "sidebar . main"  /* The center column stays empty */
  "footer footer footer";

Visual Learning Diagram (Mermaid)

graph TD
    subgraph Grid Template Area Map
    Header[header / spans Col 1 & 2] --- Header
    Sidebar[sidebar / Row 2, Col 1] --- Main[main / Row 2, Col 2]
    Footer[footer / spans Col 1 & 2] --- Footer
    end

Code Examples

Example 1: Classic Web Page Layout

Build a responsive webpage skeleton using template areas:

.grid-layout {
  display: grid;
  grid-template-columns: 240px 1fr;
  grid-template-rows: 60px auto 50px;
  gap: 15px;
  
  grid-template-areas:
    "header  header"
    "sidebar main  "
    "footer  footer";
  
  min-height: 100vh;
}

/* Assign child elements to areas */
.header-widget  { grid-area: header; background-color: #3b82f6; }
.sidebar-widget { grid-area: sidebar; background-color: #1e293b; }
.main-widget    { grid-area: main; background-color: #f8fafc; }
.footer-widget  { grid-area: footer; background-color: #0f172a; }

Example 2: Responsive Restructuring with Media Queries

Reorder the layout completely on mobile viewports by updating only the parent template areas:

/* Mobile First Layout: Single Column Stack */
.app-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  grid-template-areas:
    "header"
    "main"
    "sidebar"
    "footer";
}

/* Desktop Upgrade: Multi-column grid */
@media (min-width: 768px) {
  .app-grid {
    grid-template-columns: 250px 1fr;
    grid-template-areas:
      "header  header"
      "sidebar main  "
      "footer  footer";
  }
}

Best Practices & Common Mistakes

Incorrect Grid Shapes: Every row in your grid-template-areas map MUST have the exact same number of columns. Writing "header header" on row 1 (2 columns) and "sidebar main content" on row 2 (3 columns) is invalid and will cause the browser to ignore the entire template.
Continuous Area Blocks: Named area coordinates must form a single rectangular box. You cannot define an L-shaped or T-shaped area (like mapping header to a cell in the first row and a cell in the middle of the second row). Non-rectangular areas are invalid.

FAQs

Q: Can I use line numbers and named areas in the same grid? A: Yes! You can define your layout map using grid-template-areas and still position specific items (like a floating modal banner) using line number coordinates (e.g. grid-column: 1 / -1).

Q: What does the -1 line number coordinate do? A: The value -1 targets the final line edge of the grid. Setting grid-column: 1 / -1; tells an element to stretch across all available columns, regardless of how many columns are defined.

Summary

CSS Grid areas simplify element positioning. While grid item placement can be managed using coordinate line integers, named areas map layouts visually using grid-template-areas on parents, linking child elements using the grid-area property.

Next Tutorial

How do we build flexible column counts that adapt to mobile viewports without using media queries? Let's check: Responsive Grid Layouts.

← Back to Syllabus