Испытание: наводим мосты [9/32] 100%

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

Вдруг кому-нибудь пригодится.

.land {
  display: grid;
  grid-template-columns: 60px 60px 60px 60px 60px 60px 60px 60px 60px 60px;
  grid-template-rows: 40px 40px 40px 40px 40px 40px 40px 40px 40px 40px;
}

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

.element--top-left {
  grid-column: 2 / 4;
  grid-row: 2 / 5;
}

.element--top-right {
  grid-column: 8 / -2;
  grid-row: 1 / -8;
}

.element--bottom-left {
  grid-column: 9 / -1;
  grid-row: 8 / -1;
}

.element--bottom-right {
  grid-column: 3 / 7;
  grid-row: -2 / -5;
}

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

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

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

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

.land {
display: grid;
grid-template-columns: 60px 60px 60px 60px 60px 60px 60px 60px 60px 60px;
grid-template-rows: 40px 40px 40px 40px 40px 40px 40px 40px 40px 40px;
}

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

.element–top-left {
grid-column: 2 / 4;
grid-row: 2 / 5;
}

.element–top-right {
grid-column: 8 / -2;
grid-row: 1 / -8;
}

.element–bottom-left {
grid-column: 9 / -1;
grid-row: 8 / -1;
}

.element–bottom-right {
grid-column: 3 / 7;
grid-row: -2 / -5;
}

.element–bridge-1 {
grid-column: 4/8;
grid-row: 3/4;

}

.element–bridge-2 {
grid-column: 9/10;
grid-row: 4/8;

}

.element–bridge-3 {
grid-column: 7/9;
grid-row: 8/10;

}

.element–bridge-4 {
grid-column: 3/4;
grid-row: 5/7;

}

3

.land {
display: grid;
grid-template-columns: 60px 60px 60px 60px 60px 60px 60px 60px 60px 60px;
grid-template-rows: 40px 40px 40px 40px 40px 40px 40px 40px 40px 40px;
grid-template-areas: “. . . . . . . . .”
“. . . . . . . . .”
“. . . a a a a . .”
“. . . . . . . . c”
“. . b . . . . . c”
“. . b . . . . . c”
“. . . . . . . . c”
“. . . . . . d d .”
“. . . . . . d d .”;
}

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

.element–top-left {
grid-column: 2 / 4;
grid-row: 2 / 5;
}

.element–top-right {
grid-column: 8 / -2;
grid-row: 1 / -8;
}

.element–bottom-left {
grid-column: 9 / -1;
grid-row: 8 / -1;
}

.element–bottom-right {
grid-column: 3 / 7;
grid-row: -2 / -5;
}

.element–bridge-1 {
grid-area: a;
}

.element–bridge-2 {
grid-area: c;
}

.element–bridge-3 {
grid-area: d;
}

.element–bridge-4 {
grid-area: b;
}

как вам такой вариант?