Rows & Columns With Gridzy.js

Sometimes I’m asked how it is possible with Gridzy.js to make an image grid where all images have exactly the same size ordered in rows and columns instead of rows or columns. So let’s do this today.


Start with usual integration

1. Upload the Gridzy files to your server and add them to your website (usually in the head section):

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

2. Add the HTML code (anywhere in the body section):

<div class="gridzy" data-gridzy-layout="waterfall" data-gridzy-horizontalOrder="true">
  <img src="https://picsum.photos/200/150?1" alt="a random image" />
  <img src="https://picsum.photos/200/150?2" alt="another random image" />
  <img src="https://picsum.photos/200/150?3" alt="yet another random image" />
  <img src="https://picsum.photos/200/150?4" alt="a random image again" />
  <img src="https://picsum.photos/200/150?5" alt="a fifth random image" />
  <img src="https://picsum.photos/200/150?6" alt="a random image" />
  <img src="https://picsum.photos/200/150?7" alt="another random image" />
  <img src="https://picsum.photos/200/150?8" alt="yet another random image" />
  <img src="https://picsum.photos/200/150?9" alt="a random image again" />
  <img src="https://picsum.photos/200/150?10" alt="one last random image" />
</div>

As you can see, we need to add two configuration parameters:

  • Set data-gridzy-layout to waterfall
  • Set data-gridzy-horizontalOrder to true

Additionally we need to ensure that all images have the same size.

That’s it!

However, because it’s technically a column layout, it can happen that there appear minimal irregularities in the horizontal dimension. This happens because of mathematical rounding when the browser renders the images.


A similar layout can be achieved without Gridzy.js as well, and it’s a really two dimensional grid. If you’re interested, just have a look at Simple CSS Image Grid.

Have fun! ✌😊

Be the first to leave a reply …

or

You can post as a guest if you like. But please consider, that I always review such comments before I switch them public, to prevent spam. If you want to see your comment public immediately, just sign up and in. It's just a click away and it's really simple. You don't even need a password. 😉

made by @eHtmlu