CSS · Module 20 · Lesson 31 of 48

Grid Template Areas

What are Grid Areas?

Imagine drawing a map of your house. You label the top box "Living Room", the left box "Kitchen", and the right box "Bedroom". You then tell your furniture exactly which labeled area it belongs to.

In CSS Grid, the grid-template-areas property allows you to draw a visual text map of your layout directly inside your CSS file. You name different grid cells, and then bind your HTML elements to those names using grid-area.

Why does it matter?

Grid areas make layout code incredibly easy to read and modify. If you want to move your sidebar from the left to the right side of the screen on wide monitors, you don't need to change any HTML markup. You just rearrange the text names inside your CSS grid-template-areas definition!

Syntax Breakdown

Define the layout map on the parent grid container:

.layout {
  display: grid;
  grid-template-areas:
    "header header"
    "sidebar main";
}

Assign names to child items:

header { grid-area: header; }
main { grid-area: main; }

Common Mistakes

Mismatched grid shapes: Your template area map must form a perfect grid rectangle. You cannot draw irregular L-shapes (e.g. making a sidebar take up cells that don't align in a perfect box). If your text map is uneven, the entire grid area layout will break!

Quick Reference

grid-template-areas — Visual text map of the layout on the container.

grid-area — Binds a child element to a named area in the map.

Your Task

Define the `grid-template-areas` property on `.layout` to be exactly `"header header" "sidebar main"`.

index.html

Type code above to start the lesson.

Live Preview