Испытание 21/32 - разбиваем парк через grid-area

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

Этот способ показался мне гораздо интереснее, реализовал его довольно ленивым методом:
.land {
display: grid;
width: 540px;
grid-gap: 20px;
grid-template-areas:
“e1 e1 e5 e3”
“e4 e6 e2 e3”
“e4 e7 e2 e8”;
}

.element–1 {
grid-area: e1;
}

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

.element–3 {
grid-area: e3;
}

.element–4 {
grid-area: e4;
}

.element–5 {
grid-area: e5;
}

.element–6 {
grid-area: e6;
}

.element–7 {
grid-area: e7;
}

.element–8 {
grid-area: e8;
}

2 лайка
2

Немного другой способ

Сводка 
  .land {
      display: grid;
      width: 540px;
      grid-gap: 20px;
      grid-template-columns: 120px 120px 120px 120px;
      grid-template-rows: 120px 120px 120px;
  
}

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

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

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

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

Ещё проще:
.land {
display: grid;
width: 540px;
gap: 20px;
grid-template-areas:
“g1 g1 w1 r1”
“r2 w2 g2 r1”
“r2 s1 g2 l1”;
}

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

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

.element–3 {
grid-area: r1;
}

.element–4 {
grid-area: r2;
}

1 лайк