Почему не работают мои области шаблона сетки с изображением ASCII?

Когда дело доходит до использования искусства ASCII с grid-template-areas, существует важное ограничение: Именованные области сетки должны быть прямоугольными.

Другими словами, одноименные области сетки в форме тетриса не допускаются.

Это поведение определяется в двух частях спецификации.

7.3. Именованные области: the grid-template-areas свойство

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

Непрямоугольные или отдельные области могут быть разрешены в будущей версии этого модуля.

9. Размещение элементов сетки

Каждый элемент сетки имеет область сетки, прямоугольный набор ячеек сетки, который занимает элемент сетки.

В вашем первом примере все области сетки образуют прямоугольники. Значит, правило действует.

grid-template-areas:
       "....... header  header"
       "sidebar content content";

Во втором примере область header образует непрямоугольную форму. Значит, правило недействительно.

grid-template-areas:
       "....... header  header"
       "sidebar header content";

(Обратите внимание, что период (.) или серия связанных периодов (...) образуют безымянную область сетки, к которой правило выше не применяется (справочная информация).)

К счастью, Grid предоставляет несколько методов для размещения элементов сетки.

Вместо grid-template-areas можно использовать линейное размещение .

.wrapper {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: 120px 120px 120px;
  grid-auto-rows: 100px;
  background-color: #fff;
  color: #444;
}

.header {
  grid-column: 2 / 4;
  grid-row: 1 / 3;
}

.sidebar {
  grid-column: 1 / 2;
  grid-row: 2 / 3;
}

.content {
  grid-column: 3 / 4;
  grid-row: 2 / 3;
}

.box {
  background-color: #444;
  color: #fff;
  border-radius: 5px;
  padding: 20px;
  font-size: 150%;
}

.header {
  background-color: #999;
}

body {
  margin: 40px;
}

<div class="wrapper">
  <div class="box header">Header</div>
  <div class="box sidebar">Sidebar</div>
  <div class="box content">Content</div>
</div>