Знакомство с Гридами 32/32 - 100% результат
Испытание: грид-раскладка страницы — Знакомство с гридами — HTML Academy
.grid {
display: grid;
gap: 10px;
grid-column: 1 / -1;
grid-template-rows: 50px 100px 140px;
}
.site-heading {
grid-column: 1 / 5;
}
.good img {
display: grid;
gap: 10px;
grid-template-columns: 25px 35px 35px;
}
.good-name {
text-align: center;
height: 10px;
width: 130px;
}
.video {
width: 270px;
height: 140px;
grid-column: 1 / 3;
grid-row: 3 / 4;
}
.description {
width: 110px;
height: 120px;
}
.sidebar {
grid-column: 4 / 5;
grid-row: 2 / 4;
width: 110px;
height: 230px;
}
Можно ли было сделать код меньше и проще?
.grid {
display: grid;
gap: 10px;
grid-template-columns: 130px 130px 130px 130px;
grid-template-rows: 50px 100px auto;
}
.site-heading {
grid-column: 1/-1;
}
.sidebar {
grid-column:-2/-1;
grid-row:2/-1;
}
.video {
grid-column: 1/3;
}
20/12/2022 - 100%. Методом проб и ошибок в перечислении будущих строк и столбцов. Выполнил за 5 минут.
.grid {
display: grid;
gap: 10px;
grid-template-columns:130px 130px 130px 130px;
grid-template-rows: 50px 100px auto;
}
.site-heading {
grid-column:1/5;
}
.video {
grid-column:1/3
}
.sidebar {
grid-column:4/5;
grid-row:2/4;
}
SSId
4
Вопрос.
Почему не отработал вариант grid-template-columns: repeat(4, 1fr); ?
Именно с фракцией, с 130px - все отлично.