dry-stone-layout - Vaadin Add-on Directory
Masonry-like layout with no gaps
**[ This description is mirrored from README.md at [github.com/CaptainCodeman/dry-stone-layout](https://github.com//CaptainCodeman/dry-stone-layout/blob/v0.0.4/README.md) on 2019-05-22 ]**
[![Published on webcomponents.org](https://img.shields.io/badge/webcomponents.org-published-blue.svg)](https://www.webcomponents.org/element/CaptainCodeman/dry-stone-layout)
_[Demo and API docs](http://captaincodeman.github.io/dry-stone-layout/)_
# \
`dry-stone-layout` is a layout element that creates a masonry-like layout with no gaps
perfect for responsive image galleries. If you've ever seen dry-stone walls in the UK,
you'll understand the name.
![Example](demo/screenshot.png)
Based on these previous ideas:
* [Algorithm for a perfectly balanced photo gallery](https://medium.com/@jtreitz/the-algorithm-for-a-perfectly-balanced-photo-gallery-914c94a5d8af#.8qss863p6)
* [Google Plus image layout algorithm](http://blog.vjeux.com/2012/image/image-layout-algorithm-google-plus.html)
* [Packing images in a grid](http://fangel.github.io/packing-images-in-a-grid/)
```html
```
![](demo/14117348070_bbf190b521_m.jpg)
![](demo/28738913666_d7f288ae25_m.jpg)
![](demo/28808871375_dc652d8972_m.jpg)
![](demo/31782510030_579cb5119a_m.jpg)
![](demo/32039394161_2cfc04b72a_m.jpg)
![](demo/32061810663_2249492d02_m.jpg)
![](demo/32357716254_42aa3b0663_m.jpg)
![](demo/28686254682_185a028e2e_m.jpg)
![](demo/32260967565_7f88cb6a4c_m.jpg)
![](demo/32186892504_d99b0ffc1e_m.jpg)
![](demo/32363556052_87007c3440_m.jpg)
![](demo/32400954515_cdb6b12bf2_m.jpg)
![](demo/32873865786_1c825895f3_m.jpg)
![](demo/33001221391_6afee89be5_m.jpg)
![](demo/33186065675_95b54548da_m.jpg)