Grid-template-areas показывает ошибку «Недопустимое значение свойства»? ⇐ CSS

[Anonymous]

Я создаю страницу vijesti.html с макетом CSS Grid для отображения трех типов новостей:
сетка размером менее 800 пикселей
Сетка шириной более 800 пикселей
Основные новости (.mainNews) занимают всю ширину. Соотношение сторон должно быть 1:2 на экранах шириной более 800 пикселей и 1:1 на экранах меньшего размера.
Вертикальные новости (.verticalNews) имеют ширину 25% на экранах шириной более 800 пикселей, 50 % на маленьких экранах, а его высота всегда вдвое превышает ширину.
Square News (.squareNews) имеет одинаковую ширину и высоту, занимая 25 % ширины на больших экранах и 50 % на больших экранах. экраны меньшего размера.
Я пытаюсь использовать для этого grid-template-areas, но получаю ошибки «Недопустимое значение свойства». Как мне правильно настроить области шаблонов сетки для этого макета или есть лучший подход?
Это код, который я написал для этого. :

Код: Выделить всё

Vijest
Vijest
Vijest
Vijest
Vijest
Vijest
Vijest
Vijest
Vijest
Vijest
Vijest
Vijest
Vijest

Код: Выделить всё

body {
background-color: #cdc3a9;
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}

.news {
margin: 0;
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-gap: 10px;
grid-template-areas:
"main main main main"
"vertical square square vertical"
"vertical square square vertical"
"square square vertical vertical"
"square square vertical vertical"
}

.mainNews {
grid-area: main;
background-color: #c9daf8;
}

.verticalNews {
grid-area: vertical;
background-color: #fff2cc;
}

.squareNews {
grid-area:square;
background-color: #f4cccc;
}

Я планирую добавить медиа-запрос позже, моим первым шагом было решить эту проблему.

Подробнее здесь: https://stackoverflow.com/questions/791 ... alue-error