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

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

2 лучших решения:

1. Templates

Сводка 
.land {
  display: grid;
  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;
}

2. Сетка (auto)

Сводка 
.land {
  display: grid;
  gap: 20px;
}

.element--1 {
  grid-row: 1;
  grid-column: 1 / 3;
}

.element--2 {
  grid-row: 2 / 4;
  grid-column: 3;
}

.element--3 {
  grid-row: 1 / 3;
  grid-column: 4;
}

.element--4 {
  grid-row: 2 / 4;
  grid-column: 1;
}
2

Мои решения полностью совпадают.
Когда я делал по первому способу( Templates), то что-то подсказывало, что нужно так, но я не могу понять почему так. После сравнения 100%. Я до сих пор не догоняю, как получился такой результат, если я писал grid-area g1, g2, r3, r4 для element–1/4 и НЕ ПИСАЛ w5, w6, s7, l8. Кто-нибудь может объяснить?