Как сделать такую сетку без абсолютного позиционирования?

Question

[Артур]

Что нужно:

Что происходит если задать float: left;


Буду рад примеру подобной сетки..

Answer 1

[Mr Crabbz]

https://isotope.metafizzy.co/

Answer 2

[Павел]

В гугл с запросом:
masonry
2-ая строчка запроса:
https://masonry.desandro.com/layout.html

Comments

[Ankhena]

Просили

без абсолютного позиционирования

[Артур]

Ankhena W: Имел ввиду чтобы не самостоятельно позиционировать ячейки и была возможность их быстро изменять.

Answer 3

[Николай]

css grids

Comments

[Astrohas]

вы серьезно ?

[Николай]

Хасан Истамкулов: а что смутило на гридах сделать и сделать кросбраузерным через flex + css?

[Astrohas]

Николай: Поддержка grid сейчас около 60 процентов (caniuse.com/#search=grid). Это очень мало. Тратить человекочасы над тем что будет работать только у половины пользователей (и то не факт) + время на изучение этих самых гридов. Да и флексах тоже вряд ли без дополнительных wrapper-ов не обойтись.

[Николай]

Хасан Истамкулов: есть же,

@supports (display: flex) {
	div { display: flex; }
}
@supports (display: grid) {
	div { display: grid; }
}

проверяй поддержку и применяй стили, но твое дело)

[Astrohas]

Николай: будет дублирование кода. Зачем тратить время впустую? Grid-ы это конечно же круто, но если верить вашим канонам, то придется делать три версии:

1. На гридлах потому-что круто
   
2. На флексбоксах, которые конкретно в данной сетке не дают никакого преимущества
   
3. Табличную верстку для старых браузеров, ослика и старой оперы
   

И того час работы превращается в три часа костылирования

Answer 4

[Павел Корнилов]

CSS display:flex;

Answer 5

[Astrohas]

Тут два способа:
1. блоки, субблоки и субсубблоки. Все можно делать на чем либо хоть на флоатах
2. По мне лучше использовать таблицы в данном случае. Большие и малые элементы будут делаться тупо колспанами и ровспанами.