title: CSS3 column layout with dynamic number of columns
body: <p>I have a set of images that I want to display in the following pattern:  </p>
  
  <pre><code>[1] [4] [7] [10] [13]
  [2] [5] [8] [11] ...
  [3] [6] [9] [12]
  </code></pre>
  
  <p>I know that I can always manually group 3 images into a <code>div.column</code> or something similar, but I want to achieve this layout with as simple HTML as possible. The images are 225x150.</p>
  
  <hr>
  
  <p>Currently, I have the following HTML:</p>
  
  <pre><code>&lt;div class='album'&gt;
      &lt;img src='img/01.jpg' /&gt;
      &lt;img src='img/01.jpg' /&gt;
      ...
  &lt;/div&gt;
  </code></pre>
  
  <p>And here's my stylesheet:</p>
  
  <pre><code>.album {
      background: #faa;
      display: block;
      -webkit-column-count:2;
      -webkit-column-gap: 10px;
      height: 450px;
      width: 460px;
  
  }
  .album img {
      display: block;
      width: 100%;
  }
  </code></pre>
  
  <hr>
  
  <p><a href="http://www.w3.org/TR/css3-multicol/#overflow-inside-multicol-elements" rel="noreferrer">Chapter 8.2</a> in the specs describes that if I specify a height and the content won't fit in, more columns are created as needed, which is basically just what I want.</p>
  
  <p>As you can see, I specified a background color for the <code>.album</code>. This does only cover the first two columns though, since I set the width to <code>460px</code>. However, I really need an element that has the exact size/width of the album's content, i.e. an element wrapping the album with that exact size.</p>
  
  <p>None of the possibilities I tried seemed to work tho. (<code>100%</code>, <code>auto</code>, played with <code>overflow</code> as well)</p>
  
  <p>Does anyone have an idea on how I could create such a wrapper element for my albums?</p>