Responsive Grids width floats, collection on CODEPEN

Modular

This one is the easiest technically speaking. Images have all the same aspect ratios and simply float.

Column Grid w Different Heights: The Problem

If grid boxes have different heights and float, the grid breaks. Clearing floats is an option. but a lot of work since grid column counts likely change on smaller screens

Column Grid w Different Heights: Solution One: MatchHeights.js

This Java Script matches the height of rows. The grid won't break that way even if the column count changes.

Column Grid w Different Heights: Solution Two: Masonry.js

This Java Script makes the grid boxes fall into space to avoid larger vertical caps. Like you see on Pinterest.

Masonry.js with different widths

Masonry.js can be used with boxes that have different widths. But gaps can appear.

Modular Grid w Packery.js

Packery.js creates gap-less grids.

Modular Grid w Packery.js (truly gap-less)

Although packery.js works with margins I found out that I still ended up with gaps. Getting rid of the margins and applying paddings to images creates truly gape-less grids (as longs as they're modular).

Packery.js with different ratios

Different aspect ratios still work well with packery.js but you'll get gaps with different ratios here and there because not all ratios fit (naturally).

Packery.js round (variation)

a border-radius declaration of 50% applied once to the image tag converts the square grid onto circles.