CSS Grid Areas — A Simple Way to Build Layouts

When I started learning CSS Grid, I found grid-template-areas really interesting because it lets us name different parts of a layout.

Instead of thinking only in rows and columns, we can give each section a name.

Example

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

.header {
  grid-area: header;
}

.sidebar {
  grid-area: sidebar;
}

.main {
  grid-area: main;
}

.footer {
  grid-area: footer;
}

The layout looks something like:

┌───────────────┐
│    HEADER     │
├──────┬────────┤
│ SIDE │  MAIN  │
│ BAR  │        │
├──────┴────────┤
│    FOOTER     │
└───────────────┘

Why I like Grid Areas

It makes the CSS easier to read and understand.

For example:

grid-template-areas:
  "header header"
  "sidebar main"
  "footer footer";

You can almost understand the page layout just by looking at it.

As a beginner, I think Grid Areas is one of the easiest ways to understand CSS Grid layouts.