Masonry Css grid simple example

a simple implementation of the Masonry Css grid, the cascading grid layout library

Framework 1 :

Framework 2 :

+ Js file(s) :	https://npmcdn.com/masonry-layout@4.0/dist/masonry.pkgd.min.js

+ Css file(s) :
	Apply

	Link :
Direct http link :
	Fork button :

Html code :
	Embed preview :
	Copy the following html code to your page to embed the preview, To include many previews on a single page, just repeat the first line. You can change the width, height and border color (bcolor).

<div class="refork-widget" code="24c" style="width:100%;height:200px;" bcolor="#ccc"></div> <script type="text/javascript" src="//snippet.run/d/z.js"></script>

HTML

&lt;div class="grid"&gt;
  &lt;div class="grid-item"&gt;Hello mmr odfdsf sdof ksdf sdf sfs df&lt;br/&gt;sf dsfsdf sd d&lt;/div&gt;
  &lt;div class="grid-item"&gt;Hello mmr odfdsf sdof ksdf sdf sfs df&lt;br/&gt;sf dsfsdf sd d&lt;/div&gt;
  &lt;div class="grid-item width2"&gt;
    &lt;img src="http://www.slapix.com/img/i2/i_dont_like_the_gift.jpg" /&gt;
  &lt;/div&gt;
  &lt;div class="grid-item"&gt;Hello mmr odfdsf sdof ksdf sdf sfs df&lt;br/&gt;sf dsfsdf sd d&lt;/div&gt;
  &lt;div class="grid-item"&gt;Hello mmr odfdsf sdof ksdf sdf sfs df&lt;br/&gt;sf dsfsdf sd dHello mmr odfdsf sdof ksdf sdf sfs df&lt;br/&gt;sf dsfsdf sd dHello mmr odfdsf sdof ksdf sdf sfs df&lt;br/&gt;sf dsfsdf sd dHello mmr odfdsf sdof ksdf sdf sfs df&lt;br/&gt;sf dsfsdf sd dHello mmr odfdsf sdof ksdf sdf sfs df&lt;br/&gt;sf dsfsdf sd dHello mmr odfdsf sdof ksdf sdf sfs df&lt;br/&gt;sf dsfsdf sd d&lt;/div&gt;
  &lt;div class="grid-item"&gt;Hello mmr odfdsf sdof ksdf sdf sfs df&lt;br/&gt;sf dsfsdf sd d&lt;/div&gt;
  &lt;div class="grid-item"&gt;
  &lt;img src="http://www.slapix.com/img/i2/do_i_know_right_from_wrong.jpg" /&gt;
  &lt;/div&gt;
  &lt;div class="grid-item"&gt;Hello mmr odfdsf sdof ksdf sdf sfs df&lt;br/&gt;sf dsfsdf sd d&lt;/div&gt;
&lt;/div&gt;

CSS

Javascript

Masonry Css grid simple example

Link :

Fork button :

Embed preview :