Create mosaic grid, like masonry, with css only
Switch branches/tags
Nothing to show
Clone or download
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
dist fix url names of 3 images on demo Apr 4, 2017
src rename to masonry instead mosaic Mar 10, 2016
tasks a draft using css columns Mar 1, 2016
.gitignore adjust top of preview, and republish Mar 11, 2016
README.md publish in bower Mar 15, 2016
bower.json publish in bower Mar 15, 2016
gulpfile.js rename gulp-tasks to tasks, and adjust readme Dec 18, 2015
package.json publish in bower Mar 15, 2016

README.md

masonry-css

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

See demo - Illustrations by Ken Wong

Demo

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>