Есть простой код: https://codepen.io/Vdodovych/pen/VQoYJy
.grid {
display: grid;
}
.items {
grid-template-columns: 1fr 1fr 1fr;
grid-gap: 20px;
}
.items div:nth-child(2) {
grid-column: 2 / 4;
}
.items div:nth-child(3) {
grid-column: 1 / 3;
}
.items div:nth-child(4) {
grid-column: 3;
grid-row: 2 / 4;
}
.item {
align-items: center;
justify-items: center;
height: 200px;
background-color: brown;
color: #fff;
font-size: 25px;
}
По моей логике блок item-4 должен занимать 2fr по высоте (и вторую и третью линию одновременно), но почему-то так не происходит. Вот тут:
.items div:nth-child(4) { grid-column: 3; grid-row: 2 / 4; }
Почему не сработало и как лечить?
Ответ
Высота блоков "жестко" задана, поэтому и не реагирует 4-ый блок.
.grid {
display: grid;
}
.items {
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 200px 200px 200px;
grid-gap: 20px;
}
.items div:nth-child(2) {
grid-column: 2 / 4;
}
.items div:nth-child(3) {
grid-column: 1 / 3;
}
.items div:nth-child(4) {
grid-column: 3;
grid-row: 2 / 4;
}
.item {
align-items: center;
justify-items: center;
background-color: brown;
color: #fff;
font-size: 25px;
}
Комментариев нет:
Отправить комментарий