Как расположить колонки разной высоты друг под другом, при помощи Grid?
Как показано на изображении.
Тут пример кода:
.gallery__grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 30px;
}
.gallery__grid-item {
background: #000;
}
.gallery__grid-item:nth-child(even) {
height: 150px;
}
.gallery__grid-item:nth-child(odd) {
height: 120px;
}
Ответ
Как вы уже поняли CSS Grid позволяет генерировать разметку только с прямоугольными элементами. Поэтому чтобы у вас получилось, можно поиграться с position: relative и отрицательными margin
Пример (будет работать для любого кол-ва строк с элементами):
.gallery__grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 15px;
}
.gallery__grid-item {
background: orange;
height: 120px;
}
.gallery__grid-item:nth-child(2) {
height: 135px;
margin-top: -15px;
}
.gallery__grid-item:nth-child(3n + 2) {
position: relative;
top: 15px;
}
.gallery__grid-item:nth-last-child(1),
.gallery__grid-item:nth-last-child(3) {
height: 135px;
}
Данный пример будет работать корректно, если у нас 3 столбца и кол-во элементов кратно трём.
Комментариев нет:
Отправить комментарий