Испытание: разбиваем парк[21/32]


Выполнил на 100%, прошу оценить мой код.

.land {
display: grid;
width: 540px;
grid-gap: 20px;
grid-template-columns: 120px 120px 120px 120px;
}

.element–1 {
grid-column-start: 1;
grid-column-end: 3;
}

.element–2 {
grid-column-start: 3;
grid-row-start: 2;
grid-row-end: 4;
}

.element–3 {
grid-row-start: 1;
grid-column-start: 4;
grid-row-end: 3;
}

.element–4 {
grid-row-start: 2;
grid-row-end: 4;
}
.element–5 {
grid-column-start: 3;
grid-row-start: 1;
}
.element–6 {
grid-row-start: 2;
}
.element–7 {

}
.element–8 {

}

ИМХО так короче, и расстояния считать не надо:

Спойлер!
.land {
  display: grid;
  width: 540px;
  gap: 20px;
  grid-template-areas: 
  'g1 g1 w5 r3'
  'r4 w6 g2 r3'
  'r4 s7 g2 l8'
}

.element--1 {
  grid-area: g1;
}

.element--2 {
 grid-area: g2;
}

.element--3 {
 grid-area: r3;
}

.element--4 {
 grid-area: r4;
}

.element--5 {
  grid-area: w5;
}

.element--6 {
 grid-area: w6;
}

.element--7 {
 grid-area: s7;
}

.element--8 {
 grid-area: l8;
}