Почему элемент сетки с именем области сетки, но не определенный в областях сетки шаблона, создает дополнительный столбец?

Я создал простую CSS Grid, но решил не указывать свойства grid-template, grid-template-columns, grid-template-rows.

Вместо этого я начал с grid-template-areas и назначил имена областей для элементов сетки через свойство grid-area.

После этого меня интересовало, что произойдет, если я удалю элемент сетки из grid-template-areas. Результат был довольно странным.

Удаленный элемент сетки был помещен справа и отделен дополнительным столбцом.

Проблема:

Почему это случилось? Это ожидаемое поведение или я что-то упустил в своем коде? Как я могу удалить этот столбец?

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>

Ответ 1

Этот ответ состоит из четырех частей. Первые три помогают объяснить четвертый, который охватывает причину дополнительного столбца. Если вас интересует только ответ, перейдите к концу.

Содержание:

Больше, чем кажется на первый взгляд: там также дополнительный ряд!
Свойство grid-area.
Свойство grid-template-areas.
Размещение областей сетки без ссылок.

1. Больше, чем кажется на первый взгляд: там также дополнительный ряд!

Вы только частично определили проблему. Да, там дополнительный столбец. Но есть и дополнительный ряд.

Поскольку вы не определили высоту в контейнере сетки, высота по умолчанию равна auto & ndash; высота содержимого (подробнее). Поэтому любые строки без содержимого просто сворачиваются и становятся невидимыми.

Эта проблема не существует с шириной, потому что в этом случае вы используете контейнер уровня блока (созданный display: grid), который по умолчанию предназначен для использования всей ширины его родителя (подробнее)).

Так вот почему ты не видишь лишний ряд. Если вы зададите контейнеру некоторую высоту, появится строка.

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>

Ответ 2

Это расширение того, что Michael_B уже сказал, чтобы подчеркнуть, как создаются неявные линии сетки.

Давайте начнем с простого примера:

.container {
  width:100px;
  display: inline-grid;

  grid-auto-rows: 40px;
  border: 1px solid;

}
header {
  grid-row-start: header;
  background: blue;
}

<div class="container">
  <header>H</header>
</div>