masonry-css

Responseive Masonry style grid, like masonry plugins, but with css only!

See demo - Illustrations by Ken Wong

Install

Install using npm or bower.

npm install --save masonry-css

bower install --save masonry-css

Refer to css with dist/masonry.css, or src/masonry.scss'. I.e.

<link rel="stylesheet" src="bower_components/dist/masonry.css" />

In your .html use class .masonry as container, and inside of that, each image need has the class .masonry-item, example:

<div class="masonry">
  <img class="masonry-item" src="..." />
  <img class="masonry-item" src="..." />
  <img class="masonry-item" src="..." />
  <img class="masonry-item" src="..." />
</div>