title: How do I dynamically create a collage (grid with no gaps) of images, where images have different heights?
body: <p>I want to display a page of thumbnails.  The thumbnails are user uploaded artwork images.  Each image has a constrained width, but not a constrained height, this is to show the full image without any cropping.</p>
  
  <p>I want the images to butt up against each other with no gaps in between.  The number of columns is not fixed: If I expand or resize the page the images should flow into correct number of columns.  </p>
  
  <pre><code>float:left
  </code></pre>
  
  <p>is ALMOST, what I want.  Except when there are tall images in the page I get this gapped look:</p>
  
  <p><img src="https://i.stack.imgur.com/105Rp.png" alt="enter image description here"></p>
  
  <p>How do I eliminate the gaps?</p>