<bin-packing-grid>

<bin-packing-grid> is a custom element that fit elements into a grid using a bin-packing algorithm, in a masonry-like way. The result is similar to the grid used on pinterest and other sites.

It's created using only vanilla js, it has no dependencies, and is framework agnostic!

Also, this demo uses a very simple CSS style using transitions to animate the movement of elements. Try to resize the window!
(By the way, don't worry, using or not animations is completly up to you, and while is really easy to add them, by default it does not include any animation.)

MIT license. For installation and more information, check the github repository.

Oh! And the beautiful photos are from unsplash.com

Some Text

Contrary to the other elements, this one has explicitly set the number of rows and cols.

Ut ac consectetur mi. In in leo et purus ornare efficitur. Nunc placerat leo tellus, in mollis lorem bibendum sit amet. Sed pellentesque vestibulum accumsan. Mauris eget ante eget sapien vehicula ultricies a at dui. Ut pretium dolor ac velit dictum, eu rhoncus tortor venenatis. Cras mollis ligula et viverra iaculis. Donec aliquam lobortis augue, sed pretium sem semper non. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas ac leo nunc.

Proin dapibus accumsan ligula id volutpat. Nulla et nibh quis nisl convallis blandit in at massa. Nulla facilisi. Mauris urna sem, malesuada non dui volutpat, eleifend finibus mauris. In vel semper justo, tincidunt elementum metus. In nec est eget odio rhoncus sodales ut non sem. Phasellus imperdiet nibh vel erat commodo ultricies. Vestibulum sit amet aliquet urna.