By default elements are positioned in the grid using their order in the HTML structure.

Using grid-template-areas You can define template areas to move them around in the grid, and also to span an item on multiple rows / columns instead of using grid-column.

Here’s an example:

<div class="container">
  <main>
    ...
  </main>
  <aside>
    ...
  </aside>
  <header>
    ...
  </header>
  <footer>
    ...
  </footer>
</div>

.container {
  display: grid;
  grid-template-columns: 200px 200px 200px 200px;
  grid-template-rows: 300px 300px;
  grid-template-areas:
    "header header header header"
    "sidebar main main main"
    "footer footer footer footer";
}
main {
  grid-area: main;
}
aside {
  grid-area: sidebar;
}
header {
  grid-area: header;
}
footer {
  grid-area: footer;
}

Despite their original order, items are placed where grid-template-areas define, depending on the grid-area property associated to them.

You can set an empty cell using the dot . instead of an area name in grid-template-areas:

.container {
  display: grid;
  grid-template-columns: 200px 200px 200px 200px;
  grid-template-rows: 300px 300px;
  grid-template-areas:
    ". header header ."
    "sidebar . main main"
    ". footer footer .";
}

Lessons in this unit: