rowGrid: Responsive Table-Style Grid

If you need a perfectly straight row and are horrible at building tables, try rowGrid. And it’s even better than a table-style concept because pieces can sit without columns for perfectly randomized row formats. (Great if you are trying for that masonry look.)

The aesthetic of rowGrid is similar to that of a Google image search. It is fully responsive, built with infinite scroll and is supported by all major browsers, including Internet Explorer 8.

Here’s how it works: All items must have the same height but the width can be variable. RowGrid.js justifies the items in straight rows so that the width of the rows equals the width of the container/parent element. At first rowGrid.js adjusts the margin between the items. If this is not enough rowGrid.js scales down items.

When it comes to how this tool works, you have a few options. You have to set which items work with rowGrid, determine minimum and maximum margins, set resizing parameters and set classes for the first item and last row items. You also get to choose if items continue to auto-load or if there is a set number of images that will be shown in the grid.