css - Why does a grid-area name absent in grid-template-areas create additional tracks?

Question

I've created a simple CSS Grid, I decided to not specify grid-template, grid-template-columns, grid-template-rows properties.

Instead, I started with grid-template-areas, and assigned area names to the grid-items via grid-area property.

After that, I was interested in what would happen if I remove grid-item from grid-template-areas. The result was kind of strange.

The removed grid-item was placed on the right and separated by additional column.

The problem:

Why did this happen? Is this expected behaviour or did I miss something in my code? How can I remove this column?

body {
  display: grid;
  grid-template-areas: 
     "header"
     "footer";
}

header {
  grid-area: header;
  background: lightblue;
}

main {
  grid-area: main;
  background: darkorange;
}

footer {
  grid-area: footer;
  background: blue;
}

<header>Header</header>
<main>Main</main>
<footer>Footer</footer>

Answer 1

There are four parts to this answer. The first three help explain the fourth, which covers the reason for the extra column. If you're only interested in the answer, skip to the end.

Contents:

1. More than meets the eye: There's also an extra row!
2. The grid-area property.
3. The grid-template-areas property.
4. The placement of unreferenced grid areas.

---

1. More than meets the eye: There's also an extra row!

You've only partially defined the problem. Yes, there's an extra column. But there's also an extra row.

Because you haven't defined a height on the grid container, the height defaults to auto – the height of the content (more details). So any rows with no content simply collapse and are invisible.

This issue doesn't exist with width because, in this case, you're using a block-level container (created by display: grid), which is designed to consume the full width of its parent, by default (more details).

So that's why you're not seeing the extra row. If you give the container some height, the row will appear.

body {
  display: grid;
  grid-template-areas:
    "header"
    "footer";
  height: 150px; /* new */ 
}

body {
  display: grid;
  grid-template-areas:
    "header"
    "footer";
  height: 150px; /* new */
}

header {
  grid-area: header;
  background: aqua;
}

main {
  grid-area: main;
  background: darkorange;
}

footer {
  grid-area: footer;
  background: lightgreen;
}

<header>Header</header>
<main>Main</main>
<footer>Footer</footer>