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

[Гость]

Когда

grid-template-areas: "....... заголовок заголовка" «содержимое боковой панели»; изменено на:

grid-template-areas: "....... заголовок заголовка" «содержимое заголовка боковой панели»; Все разваливается.

Как добиться того же эффекта с помощью макета CSS Grid?

body { поле: 40 пикселей; } .сайдбар { область сетки: боковая панель; } .содержание { область сетки: контент; } .header { область сетки: заголовок; } .wrapper { дисплей: сетка; разрыв сетки: 10 пикселей; столбцы шаблона сетки: 120 пикселей 120 пикселей 120 пикселей; Grid-template-areas: "....... заголовок заголовка" "содержимое боковой панели"; цвет фона: #fff; цвет: #444; } .коробка { цвет фона: #444; цвет: #fff; радиус границы: 5 пикселей; отступ: 20 пикселей; размер шрифта: 150%; } .header { цвет фона: #999; Заголовок Боковая панель Содержимое

https://codepen.io/rachelandrew/pen/oXKgoQ