CSS Columns (Photo Grid) display left to right instead of top to bottom
<p>I'm using columns to create a photo grid that fits all the supplied photos together without any whitespace between them.</p>

<p>Here is the CSS I'm using:</p>

<pre><code>.autofit-photo-grid {
  /* Prevent vertical gaps */
  line-height: 0;
  -webkit-column-count: 3;
  -webkit-column-gap: 0;
  -moz-column-count: 3;
  -moz-column-gap: 0;
  column-count: 3;
  column-gap: 0;
}

.autofit-photo-grid img {
  /* Just in case there are inline attributes */
  width: 100% !important;
  height: auto !important;
  border: 1px solid #777;
  opacity: 0.85;
}
</code></pre>

<p>Here is a sample fiddle showing the issue: <a href="https://jsfiddle.net/es7hLuq4/" rel="nofollow">https://jsfiddle.net/es7hLuq4/</a></p>

<p>If you hover over each image, you will see that they say "photo 1", "photo 2", etc. but the order goes like this</p>

<pre><code>1    4    7
2    5    8
3    6    9
</code></pre>

<p>But I would like it go like this</p>

<pre><code>1    2    3
4    5    6
7    8    9
</code></pre>

<p>Is this possible with pure CSS? If not, are there any clean jQuery solutions that could help? I thought about looping through each image element and attempting to check which column it's in, but that seemed messy (would have to repeat on resize) and I also do not know how to check which column an element is currently in.</p>

<p>Any ideas how to achieve the same auto-fit grid effect but list consecutive items left to right rather than top to bottom?</p>