Masonry

Applies negative CSS margin to items so that they appear stacked on top of each other. Uses a Poller to recalculate when items change.

<section ob-masonry>
	<div ob-masonry-item>1</div>
	<div ob-masonry-item>2</div>
	<div ob-masonry-item>3</div>
	<div ob-masonry-item>4</div>
	<div ob-masonry-item>5</div>
	<div ob-masonry-item>6</div>
	<div ob-masonry-item>7</div>
	<div ob-masonry-item>8</div>
	<div ob-masonry-item>9</div>
</section>

[ob-masonry] {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	margin: -10px;
}

[ob-masonry-item] {
	margin: 10px;
}

import { Watcher } from 'oblik'
import { Masonry } from 'oblik/components/masonry'

let w = new Watcher(document.body, {
	components: {
		masonry: Masonry
	}
})

w.init()