Знакомство с гридами 21/32

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

Вот такой код, визуально все сходится, но пише 36% совпадения, наложение нет отличий, а различие все красное. Чего так ?

.land {
display: grid;
width: 540px;
gap: 20px;
grid-template-columns: 120px 120px 120px 120px;
grid-template-rows: 120px 120px 120px;
grid-template-areas:
“g1 . w5 g3”
“g4 w6 g2 .”
“. y7 . r8”
}

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

.element–2 {
grid-area: g2;
grid-row-start: -1;
grid-row-end: -3;
}

.element–3 {
grid-area: g3;
grid-row-start: 1;
grid-row-end: 3;
}

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

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

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

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

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

2

Как мне кажется, не нужно совмещать два способа решения: надо или с помощью grid-template-columns, grid-template-rows и grid-column, grid-row или с помощью grid-template-areas.

3 лайка
3

Спасибо !

4

Вот 2 варианта решения: с помощью grid-template-areas и grid-template-columns/rows

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

/* Предыдущий код
.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;
}

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

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

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