Не работает grid-template в испытании "Разбиваем парк"

Курсы Знакомство с гридами
1

Хотела в испытании потренироваться с grid-areas, прописала следующий код, который, по логике, должен работать, и в прошлых заданиях подобный был:

.land {
  display: grid;
  width: 540px;
  gap: 20px;
  grid-template-areas:
    "grass grass water rocks"
    "rocks water grass rocks"
    "rocks sand grass lava";
}

.element--grass {grid-area: grass;}
.element--rocks {grid-area: rocks;}
.element--water {grid-area: water;}
.element--sand {grid-area: sand;}
.element--lava {grid-area: lava;}

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

1 лайк
2

.land {
display: grid;
width: 540px;
gap: 20px;
grid-template-areas:
“grass1 grass1 water5 rocks3”
“rocks4 water6 grass2 rocks3”
“rocks4 sand7 grass2 lava8”;
}

.element–1 {
grid-area: grass1;
}
.element–2 {
grid-area: grass2;
}
.element–3 {
grid-area: rocks3;
}
.element–4 {
grid-area: rocks4;
}

там же несколько элементов grass и rocks

2 лайка
3

у меня ваш код не работает ((

4

спасибо за идею, всё получилось :hearts:

5

А у меня всё точно так же! Только долго не мог понять почему вода у меня выше, чем полянка. Пока не заглянул в этот раздел. Оказалось, что в grid-area второго элемента нужно было всё-таки указать именованную область полянки, а не воды!

.element–2 {
grid-area: grass2;
}

А я изначально указал

.element–2 {
grid-area: water5;
}