masonry-css

create masonry style grid, like masonry plugins, but with css only!

Usage no npm install needed!

<script type="module">
  import masonryCss from 'https://cdn.skypack.dev/masonry-css';
</script>

README

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>