Responsive image gallery using inline-block

Resize the window to see the 4 column grid become a 3 column grid at a 900px breakpoint and a 2 column grid at a 700px breakpoint. If this layout were done with floats instead of inline-block, it would break if you did not clear the floats.

If you use floats, you will have to clear the .thumbBlock selector thrice depending on the breakpoint: nth-of-type(4n+1) at the default large size, nth-of-type(3n + 1) at 900px and nth-of-type(2n +1) at 700px. Using inline-block instead of floats eliminates this problem. To mimic this, inspect element in the browser and replace the display: inline-block with float: left.

Handle the whitespace between inline-block elements and you're good to go. This demo does not add the closing li tag to solve this.