title: Force div to next column
body: <p>I'm creating an image grid using <code>column-count</code>. The issue with using columns is the fact, like text, even images get broken. So the top half of an image can be in one column and the bottom half can be in the second column. I solved this by adding <code>display: inline-block</code> to the items in the columns. <strong>That got me to my current problem:</strong><br>
  With a <code>column-count</code> of 3 and with 7 items, the items are displayed as [3][3][1].</p>
  
  <pre><code>[item]   [item]   [item]
  [item]   [item]
  [item]   [item]
  </code></pre>
  
  <p>I would want the items to be displayed as [3][2][2]. So the question is: <strong>Can I force one of the divs to the next column?</strong></p>
  
  <p>HTML</p>
  
  <pre><code>&lt;div id="container"&gt;
      &lt;div class="item"&gt;&lt;/div&gt;
      &lt;div class="item"&gt;&lt;/div&gt;
      &lt;div class="item"&gt;&lt;/div&gt;
      &lt;div class="item"&gt;&lt;/div&gt;
      &lt;div class="item"&gt;&lt;/div&gt;
      &lt;div class="item"&gt;&lt;/div&gt;
      &lt;div class="item"&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>#container {
      column-count: 3;
      -moz-column-count: 3;
      -webkit-column-count: 3;
      width: 100%;
  }
  .item {
      background: red;
      /*-webkit-column-break-inside: avoid;
      -moz-column-break-inside:avoid;
      -moz-page-break-inside:avoid;
      page-break-inside: avoid;*/
      display: inline-block;
      height: 250px;
      margin-bottom: 20px;
      width: 100%;
  }
  </code></pre>
  
  <p><a href="http://jsfiddle.net/eL62w/" rel="nofollow">jsfiddle</a>  </p>
  
  <p>The part that is commented out is a second way of preventing the images to break, but it's less supported than a simple <code>display:inline-block</code>. It does the exact same thing.</p>
  
  <p>I tried variating in height and using <code>clear</code>.</p>
  
  <p><strong>Update</strong><br>
  Per requested, a little background information / use case.<br>
  The image grid will be used on a simple website for a restaurant. It will be used on several pages with two different functions. Function one is on the front page where eight images, in either portrait or landscape format, will function as links to the different pages. (8 images get divided properly [3][3][2]) The second function of the image grid will be, as an image grid. For example, the restaurant has a rich history and they have images dating back almost 100 years. More images might be added along the way. Using column count instead of three divs makes it easier to add images and it super easy to make responsive. The problem is that with certain amounts of images, like 7, the images don't get divided properly over the columns.</p>
  
  <p><strong>Update 2</strong><br>
  I tried using the Masonry framework, but that worked sluggish.</p>