Responsive, Varying Height Tiles

Resource Date
Resource Author
Mark Lesniak

One of the web trends these days is the Pinterest-ish, responsive, varying height tile design.  Examples of this are Pinterest (of course), NYPL.org, and some others.  Doing this in pure CSS is a bear if not completely impossible due to CSS's rather interesting handling of element height.  There are frameworks out there that will do it, but obviously you are adding overhead by importing them into your page.  If you are already using jQuery on your site, the linked resource provides a rather easily implementable way of bringing this sort of responsive design to your site of choice.  I also threw in a mobile media query just for good measure.  

So play with the site.  Manually resize the window and see how it works.  

Topic Categories