Force div to next column

Question

I'm creating an image grid using column-count. 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 display: inline-block to the items in the columns. That got me to my current problem:
With a column-count of 3 and with 7 items, the items are displayed as [3][3][1].

[item]   [item]   [item]
[item]   [item]
[item]   [item]

I would want the items to be displayed as [3][2][2]. So the question is: Can I force one of the divs to the next column?

HTML

<div id="container">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
</div>

CSS

#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%;
}

jsfiddle

The part that is commented out is a second way of preventing the images to break, but it's less supported than a simple display:inline-block. It does the exact same thing.

I tried variating in height and using clear.

Update
Per requested, a little background information / use case.
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.

Update 2
I tried using the Masonry framework, but that worked sluggish.

Answer 1

I was looking for the solution in 2019 and that what I found. You can jump to next column in a css column-count layout with this trick :

<div id="container">
   <div class="item"></div>
   <div class="item"></div>    
   <div class="item"></div>
   <div class="item"></div>
</div>

#container {
    column-count: 3;
}
.item {
    break-inside: avoid-column;   
}
.item:nth-of-type(2){
    break-after:column;
    display:block;
}

This add a display:block property to the second ".item" element to force a break, the third ".item" will be displayed on top of the next column.

Check out there a working example : http://jsfiddle.net/n3u8vxLe/2/

Just tested it on Chrome 75, IE 11, Firefox 67 and it seems to be OK.