Masonry layout

This CSS-only responsive masonry-based layout has cross browser support. With this layout you can enhance your galleries, blogs and product lists and more.

Cat

photo manipulation

Idea bulb

SVG image

Golden drapery

photography

Symbiot4

Internet of Things admin theme

LIVEPREVIEW

Devices

photography

Flatela

SVG icons

Xmas deco

photography

Stars pattern

SVG background image

Operator

photography

Golden dots

SVG image

LIVEPREVIEW

Lime splosh

photo manipulation

Honey combs

3D abstract

Masonry usage

Items must be wrapped inside a <div> with class="masonry-container". You can choose class="masonry-item" or class="card" to define the masonry items.


	<div class="masonry-container">
	    <div class="card"> ... </div>
        <div class="card"> ... </div>
        ...
        <div class="card"> ... </div>
	</div>
    
    <!-- without "card" styles -->
    
    <div class="masonry-container">
	    <div class="masonry-item"> ... </div>
        <div class="masonry-item"> ... </div>
        ...
        <div class="masonry-item"> ... </div>
	</div>