Responsive Photo Grid In Vanilla JavaScript – ImageRow.js

Preview:

Description:

ImageRow.js is a pure Vanilla JS based photo grid library which gives you the ability to responsively re-arrange a set of images row by row while preserving their original aspect ratios.

How to use it:

Load the CSS file imagerow.css and JavaScript file imagerow.js into the html document.

<link rel="stylesheet" href="imagerow.css">
<script src="imagerow.min.js"></script>

Add your images to the grid rows as shown below:

<section class="image-row">
  <img src="1.jpg" />
  <img src="2.jpg" />
 </section>
 
<section class="image-row">
  <img src="3.jpg" />
  <img src="4.jpg" />
  <img src="5.jpg" />
 </section>
<section class="image-row">
  <img src="6.jpg" />
</section>

That’s it. The ImageRow.js will take care of the rest. Resize the browser window to see the magic and enjoy it.