Lightweight
FlexMasonry weighs just 6KB of JS and CSS combined.
Fast
Uses CSS flexbox for ultimate speed and performance.
Responsive
Show different number of columns at different breakpoints.
Quick Start
1. Include the JS & CSS files on the page:
<link rel="stylesheet" href="https://unpkg.com/flexmasonry/dist/flexmasonry.css">
<script src="https://unpkg.com/flexmasonry/dist/flexmasonry.js"></script>2. Then, set up your HTML:
<div class="grid">
<div><img src="https://source.unsplash.com/t3DHojIo-08" alt=""></div>
<div><img src="https://source.unsplash.com/Imc-IoZDMXc" alt=""></div>
<div><img src="https://source.unsplash.com/SOZWHqeXcPQ" alt=""></div>
<div><img src="https://source.unsplash.com/bkdzvgBB7rQ" alt=""></div>
<div><img src="https://source.unsplash.com/Aruugw_rJCM" alt=""></div>
</div>3. Finally, hook up the script:
FlexMasonry.init('.grid');