Flexible table of images

Question

I'm looking for a way to present N images in a table / tabular form.
The catch is, it needs to handle window resize or different resolutions and re-arrange itself. I'm able to use JQuery in my project, but if possible to avoid it would be better of course.

Answer 1

Images will naturally reflow when their parent element resizes.

http://codepen.io/cimmanon/pen/dwbHi

Now if you want to have the spacing between the elements evenly distributed, Flexbox can help you out:

http://codepen.io/cimmanon/pen/iHGCd

.gallery {
  margin: -5px;
  display: -webkit-flexbox;
  display: -ms-flexbox;
  display: -webkit-flex;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-flex-pack: justify;
  -ms-flex-pack: justify;
  flex-pack: justify;
  -webkit-justify-content: space-between;
  justify-content: space-between;
  -webkit-flex-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
}
@supports (flex-wrap: wrap) {
  .gallery {
    display: flex;
  }
}

.gallery img {
  margin: 5px;
}

<div class="gallery">
    <img src="http://placehold.it/200x100" /><!--
    --><img src="http://placehold.it/200x120" /><!--
    --><img src="http://placehold.it/200x100" /><!--
    --><img src="http://placehold.it/200x100" /><!--
    --><img src="http://placehold.it/200x140" /><!--
    --><img src="http://placehold.it/200x100" /><!--
    --><img src="http://placehold.it/200x100" /><!--
    --><img src="http://placehold.it/200x130" /><!--
    --><img src="http://placehold.it/200x100" /><!--
    --><img src="http://placehold.it/200x100" /><!--
    --><img src="http://placehold.it/200x100" /><!--
    --><img src="http://placehold.it/200x90" />
</div>

Current browser support: Chrome, Opera, IE10. http://caniuse.com/#feat=flexbox

Alternately, you could use CSS Columns (same markup as above):

http://jsfiddle.net/qeZaZ/

.gallery {
    -webkit-columns: 250px;
    -moz-columns: 250px;
    columns: 250px;
    text-align: center;
}