Grid Areas

Free CSS Developer Roadmap 2026 CSS roadmap for beginners Learn CSS step by step roadmap Responsive CSS learning path

A complete FREE CSS Developer Roadmap to master layouts, responsiveness, and animations.

CSS Grid Areas is probably the simplest way to create layouts as it allows one to actually “draw” a webpage using words rather than numbers.

It‘s like a map. You don‘t have to tell your friend “go to the third street and turn right,” you can just mark neighborhoods off the map labeled “The Park” or “Downtown,” and send them to that location.

1. The Core Concept

To use Grid Areas, you follow a simple two-step process:

Name the pieces: (You new HTML elements a nickname)
Draw the map: To do this, put those names/terms inside your container.

2. Step-by-Step Implementation

Step A: Name your items (grid-area)

First, you‘re going to go to your CSS items (your header, sidebar, footer etc.) and name them with the grid-area; property.

CSS

.header { grid-area: nav; }
.sidebar { grid-area: side; }
.content { grid-area: main; }
.footer { grid-area: foot; }

Step B: designing the layout (grid-template-areas)

Now within the parent container you use grid-template-areas, which describe what the layout is supposed to look like with those names. You enclose each row in double quotes.

CSS

.container {
  display: grid;
  grid-template-columns: 1fr 3fr; /* Two columns */
  grid-template-rows: auto;
  grid-template-areas: 
    "nav  nav"
    "side main"
    "foot foot";
}

3. Rules of the “Map”

To make sure the browser understands your map, you have to follow a few rules:

Rectangles Only: All these areas of a part has to be a square or in a rectangle shape. No L shape and T shape.
Must Not Leave Gaps: All of your grid cells need a cell name or a cell name placeholder.
The Dot (.): If you want to leave a grid cell empty, use a period/dot (.).Example: “nav .” would put the nav on the left and leave the right side empty.
Spelling Matters: The name in grid-template-areas must match the grid-area name exactly.

4. Why use this instead of numbers?

Feature	Grid Lines (Numbers)	Grid Areas (Names)
Readability	Harder; you have to count lines.	Very easy; it looks like a diagram.
Responsiveness	You have to change numbers for every breakpoint.	You just redraw the “map” in a media query.
Complexity	Great for simple overlaps.	Best for full-page layouts.

Example: Making it Mobile Responsive

With Grid Areas, changing a layout for mobile is incredibly fast. You don’t have to touch the items; you just change the map on the container:

CSS

/* Mobile: Everything in one column */
@media (max-width: 600px) {
  .container {
    grid-template-areas: 
      "nav"
      "main"
      "side"
      "foot";
  }
}

Summary Checklist

Set display: grid; on the parent.
Define grid-template-columns so the browser knows how many “slots” are in each row of your map.
Assign grid-area: name; to your children.
Draw the layout with grid-template-areas: “name name”;.