#библиотека дня
Раскладка Masonry (буквально — каменная кладка), когда элементы уложены максимально плотно, до сих пор не потеряла своей популярности. Её отличие от классических CSS-колонок – в порядке следования элементов. Если колонки это
1 4 7
2 5 8
3 6
то в Masonry- или Pinterest-раскладке порядок стремится к классической сетке:
1 2 3
4 5 6
7 8
Но в сетке все ячейки одного размера, а в кладке – нет (смотрите иллюстрацию). Была даже попытка внедрить это в CSS Grids, в одной из версий Firefox.
Долгое время де-факто стандартом библиотеки для Masonry была, собственно, Masonry.js. Но она достаточно тяжёлая и её методы немного устарели. Сейчас же есть много альтернатив.
Одна из новых и сравнительно легковесных — это FlexMasonry. Весит всего 6 килобайт, подключается очень просто и с задачей справляется отлично. Ну и использует флексы, как нетрудно догадаться из названия
@htmlshit
#css #js #flex #masonry
