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

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

как-то так получилось:

code

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

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

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

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

}

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

2

Подскажите, где ошибка?

.land {
display: grid;
width: 540px;
grid-template-columns: 120px 120px 120px 120px;
grid-template-rows: 120px 120px 120px;
gap: 20px;
grid-template-areas:
“grass grass water rocks”
“rocks water grass rocks”
“rocks sand grass lava”;
}

.element–1 {
grid-area: grass
}

.element–2 {
grid-area: grass
}

.element–3 {
grid-area: rocks
}

.element–4 {
grid-area: rocks
}

.element–5 {
grid-area: water
}

.element–6 {
grid-area: water
}

.element–7 {
grid-area: sand
}

.element–8 {
grid-area: lava
}

3

Дает 100% результат

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

.element–1 {
grid-area: g;
grid-column: 1/3;
grid-row: 1/2;
}

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

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

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

1 лайк
4

.land {
display: grid;
width: 540px;
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-column-end: 4;
grid-row-start: 2;
grid-row-end:4;
}

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

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

5

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

.element–1 {
grid-area: g;
grid-column: 1/3;
grid-row: 1/2;
}

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

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

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

6 
.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;
}

7

Возможно ли сократить код ещё больше? Какие есть способы?

Code

.land {
display: grid;
width: 540px;
gap: 20px;
grid-template-areas:
“g g . r”
“r . g r”
“r . g .”;
}

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

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

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

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

9

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

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

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

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

}

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

10

100% с помощью свойства grid-template-areas:

.land {
display: grid;
width: 540px;
gap: 20px;
grid-template-areas:
“g1 g1 . r3”
“r4 . g2 r3”
“r4 . g2 .”;
}

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

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

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

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

11

100%

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

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

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

}

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

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