Как реализовать такую расстановку блоков на FlexBox CSS?

Question

[L_B_A]

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


Пробовал через FlexBox CSS, но получилось только так «CodePen»

Comments

[Антон]

Смотрю решения есть.
Кто бы сказал - как сюда же добавить адаптивность по ширине
Например показываем 10 колонок на больших экранах, и чем меньше экран - убавляем количество колонок, но так, чтобы контент был читаем и сильно не был заужен.
Вот пример, где с шириной всё в порядке, но с высотой блоков нужно поработать jsfiddle.net/t8go1qrn

Answer 1

[Ivan Bogachev]

С помощью чего и как можно реализовать вот такую расстановку блоков?

На ум сразу приходит masonry.

Answer 2

[Антон]

Это column count

.blog__block {
    column-count:3;
}

.blog__item {
    width:100%;
  margin-bottom: 30px;
    border-radius: 4px;
    box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.10);
}

Comments

[L_B_A]

Круто, только почему-то улетел 2-й item и внизу обрезка странная

[Антон]

L_B_A,

.blog__block {
    column-count:3;   
}

.blog__item {
    page-break-inside: avoid;
    margin-bottom: 30px;
    border-radius: 4px;
    box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.10);
}

[profesor08]

Антон, гениально, поддержка IE10+, в сети полно скриптов делающих это, в то время когда можно обойтись двумя CSS свойствами.

https://codepen.io/Profesor08/pen/gObpmzO

[dom1n1k]

Колонки - простое решение, но часто неподходящее, потому что оно диктует определенный порядок блоков.
Если вам нужен будет хронологический порядок, то скорее всего люди читать это будут по строкам, а не столбцам. А если например понадобится бесконечный скролл с подгрузкой, то вообще всё поломается.

Ну то есть вариант имеет право на существование, но нужно четко понимать его ограничения (это я автору вопроса).

Answer 3

[LeonidPokrovskiy]

Легко и просто! На чистом CSS сделал: https://codepen.io/CitizenOne/pen/abzOJYK

Можно даже без FLEX сделать

Answer 4

[Mihail Lyamin]

На js - masonry.
На flexbox - вижу решение: flex-flow: column wrap и задать высоту контейнера

Answer 5

[Станислав Задирака]

Есть один момент не всегда очевидный, все решения столбцами, и column и flex-direction: column, приведут к непривычной сортировке. Если у вас есть правило например, что первыми должны идти свежие, то при этих решениях вы этого не получите.
Единственный вариант - массонри, там тоже будет сбой порядка следования, но он несравним с предыдущими решениями.

Answer 6

[Diatomiccoder]

https://webformyself.com/css-masonry-s-pomoshhyu-f...
Вот в этой статье описано решение masonry-grid сетки. Но у этого метода есть одна проблема... Контейнеру нужно задавать высоту фиксированную.

Если делать через column-count, то возникнут проблемы (особенно если хотите сделать что-то вроде "бесконечной ленты/скролла").