Show different number of columns at different breakpoints.

Uses CSS flexbox for ultimate speed and performance.

FlexMasonry weighs just 6KB of JS and CSS combined.

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');

Read Full Instructions