Испытание Разбиваем парк

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

Решила задание первым способом, через grid-template-columns, grid-template-rows.
А через grid-template-areas не могу, что не так?
1

.land {
  display: grid;    
  width: 540px;
  grid-gap: 20px;
  grid-template-areas:
    "g g w r"
    "r w g r"
    "r s g l";
}

.element--grass {
  grid-area: g;
}

.element--rocks {
  grid-area: r;
}

.element--water {
  grid-area: w;
}

.element--sand {
  grid-area: s;
}

.element--lava {
  grid-area: l;
}
2

Дело в том, что название grid-area для каждого элемента должно быть уникально. То есть у вас есть 8 элементов, значит должно быть и 8 названий grid-area.
Например, так:

grid-template-areas:
    "g g w r"
    "r1 w1 g1 r"
    "r1 s g1 l";

А дальше для каждого элемента (c 1 по 8) прописываете grid-area отдельно.

3 лайка
3

Спасибо, поняла!

4

тоже долго с этим мучался, ваша подсказка кстати

5

хз надо ли кому, но оставлю на всякий пожарный, вдруг кто не разобрался

через именование областей 
.land {
  display: grid;
  width: 540px;
  grid-gap: 20px;
  grid-template-areas:
    "g1 g1 w1 r1"
    "r2 w2 g2 r1"
    "r2 s g2 l";
}
.element--1 {
  grid-area: g1;
}
.element--2 {
  grid-area: g2;
}
.element--3 {
  grid-area: r1;
}
.element--4 {
  grid-area: r2;
}
.element--5 {
  grid-area: w1;
}
.element--6 {
  grid-area: w2;
}
.element--7 {
  grid-area: s;
}
.element--8 {
  grid-area: l;
}
через размерность 
.land {
  display: grid;
  width: 540px;
  grid-gap: 20px;
  grid-template-columns: auto auto auto auto;
  grid-template-rows: auto auto auto;
}

.element--1 {
  grid-column: 1/3;
}
.element--2 {
  grid-column: 3;
  grid-row: 2/-1;
}
.element--3 {
  grid-column: 4;
  grid-row: 1/3;
}
.element--4 {
  grid-column: 1;
  grid-row: 2/-1;
}
2 лайка