Responsive, Varying Height Tiles

Responsive, Varying Height Tiles

Submitted by: Mark Lesniak, Rahway Public Library, Jan 28, 2015

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: 

  • Design & Development

Tools/Tags: 

  • jQuery
  • CSS
  • Responsive Design

LibraryLinkNJ, The New Jersey Library Cooperative
2300 Stuyvesant Avenue, Trenton, NJ 08618
Phone: 732-752-7720 | Fax: 732-752-7785

LibraryLinkNJ Website Use Policies

LibraryLinkNJ, The New Jersey Library Cooperative, and its services are funded by the New Jersey State Library,
which is responsible for the coordination, promotion, and funding of the New Jersey Library Network.