Страницы

Поиск по вопросам

среда, 24 октября 2018 г.

CSS Grid колонки разной высоты

Как расположить колонки разной высоты друг под другом, при помощи 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 столбца и кол-во элементов кратно трём.

Комментариев нет:

Отправить комментарий