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

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

123
123.PNG1920×969 183 KB

Выполнил на 100%, прошу оценить мой код.

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

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

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

}
.element–8 {

}

2

ИМХО так короче, и расстояния считать не надо:

Спойлер! 
.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;
}
3

В данном случае можно еще меньше клацать по клаве, свалив часть кода на автораспределение )

.land {
display: grid;
width: 540px;
gap: 20px;

grid-template-areas:
“green-1 green-1 water-5 rock-3”
“rock-4 water-6 green-2 rock-3”
“rock-4 s green-2 l”
}

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

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

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

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

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

4

Можно вообще так:

.land {
  display: grid;
  width: 540px;
  gap: 20px;
}

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

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

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

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

Сетка разбивается автоматически, но при желании можно явно это прописать:

  grid-template-columns: auto auto auto auto;
  grid-template-rows: auto auto auto;
1 лайк
5

Подскажите, у кого-нибудь есть соображения, почему выделенная строчка слева в коде не даёт 100% выполнения, хотя всё совпадает? При удалении строки - 100%.

image
image1363×934 287 KB

6

Вот ещё один вариант `.land {
display: grid;
width: 540px;
gap: 20px;
grid-template-columns: 120px 120px 120px 120px;
grid-template-rows: 120px 120px 120px 120px;
}

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

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

}

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

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

7

Здесь так бывает. Нужно полное попадание в написанный ИМИ код. Иначе - 38%)))

9

Безымянный
Безымянный1136×833 155 KB

недочёт!

10

Вот мой результат:
.land {
display: grid;
width: 540px;
gap: 20px;
grid-template-columns: 120px 120px 120px 120px;
grid-template-rows: 120px 120px 240px 120px;
}

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

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

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

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

Только один вопрос: почему 99.9%, а не 100%??? Где неточность??? Смотрю в “различия”, ничего красным не подсвечивается.

12

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

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

13

100%

.land {
display: grid;
width: 540px;
gap: 20px;
}

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

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

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

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

14

Что я сделал не правильно? По сравнению всё отлично проходит, визуально тоже всё в порядке, но если тыкнуть различия - всё красное. Что нужно поправить?

111
1111364×890 245 KB 

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

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

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

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

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

100% и писанины мало

.land {
display: grid;
width: 540px;
gap: 20px;
grid-template-columns:120px 120px 120px 120px;
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;
}

16 
100% лаконичности

.land {
  display: grid;
  width: 540px;
  gap: 20px;
  grid-template-areas: 
  "g-1 g-1 . r-1"
  "r-2 . g-2 r-1"
  "r-2 . g-2 ."
}
 
.element--1 {grid-area: g-1;}
.element--2 {grid-area: g-2;}
.element--3 {grid-area: r-1;}
.element--4 {grid-area: r-2;}
17

20/12/2022 -100%. Разбил гриды для наглядности на столбцы и строки.

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

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

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

}

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

}

.element--4 {
  grid-row: 2/4;

}