Floated thumbnail gallery, different sizes, how to handle?

Question

When simply doing float:left to all thumbnails of the same size, a gallery looks great. But when different size thumbnails come in to play, that is no longer the case.

What is the best way to handle different size thumbnails? Do I need to use tables instead?

Answer 1

None of the possible CSS solutions look particularly good.

I recommend using JavaScript+jQuery instead, specifically one of these plugins:

• http://masonry.desandro.com/
• http://isotope.metafizzy.co/

Answer 2

I think the best solution is to give each thumbnail a div container with a fixed size, so that every thumbnail takes the same space. I mean, don't resize your thumbnails. The picture in the div should be centered.

Answer 3

I have used following plugin, it's working fine:

http://suprb.com/apps/gridalicious/

Answer 4

For those in 2017 looking for a gallery for different sized images, check this css-tricks article: https://css-tricks.com/seamless-responsive-photo-grid/