Горизонтальный masonry на css?

Question

[gpm7315]

Привет! Подскажите, пожалуйста, можно на чистом css замутить такое расположение блоков с горизонтальным скроллингом? В каком направлении двигать?

Answer 1

[Александр Алексеев]

обертка с whitespace nowrap и overflow-x auto
внутри блоки inline-block
ну и внутри уже наборы ваших элементов
там простор для фантазии, но я бы сделал обычной сеткой или флексами

Comments

[gpm7315]

Спасибо! Сделал на флексах, оказалось, всё очень просто. А, поскольку, скроллбар будет скрыт, не подскажете js библиотеку для скролла колёсиком мыши и перетаскивания (click and drag) контейнера курсором?

Answer 2

[Марат Гарифуллин]

Возможно вам подойдёт Css grids

Comments

[Rustam Bainazarov]

Да и Flexbox подойдёт, если разбить на однотипные группировки блоков.

[gpm7315]

SmthTo, Правильно я понимаю, что вы предлагаете во flex контейнере разместить “группирующие” flex контейнеры? Т.е. в соотвествии с моим примерным макетом:

.container (display: flex;)
    .item
    .group1 (display: flex;)
        .item
        .item
        .item
        .item
    .item
    .group2 (display: flex;)
        .item
        .item

[Марат Гарифуллин]

gpm7315, флекс требует дополнительных контейнеров, гриды можно все в одном и позволяют динамически менять структуру