Menu
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.
493
Set size and make inline Because they're block elements, when reducing the size of Div one to make room for the other div, you're left with space next to Div one and Div two below Div one. To move the div up to the next line both div's need to have the inline-block display setting as shown below.
You can force the content of the HTML <div> element stay on the same line by using a little CSS. Use the overflow property, as well as the white-space property set to “nowrap”.
Approach: To create a two-column layout, first we create a <div> element with property display: flex, it makes that a div flexbox and then add flex-direction: row, to make the layout column-wise. Then add the required div inside the above div with require width and they all will come as columns.
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.
153
If all else fails, you could insert a dummy div, though I feel dirty suggesting it! (and I'm not sure if it is viable for your setup).
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>
#container {
column-count: 3;
-moz-column-count: 3;
-webkit-column-count: 3;
width: 100%;
}
.item {
background: red;
}
.item, .dummy {
display: inline-block;
height: 250px;
margin-bottom: 20px;
width: 100%;
}
</style>
</head>
<body>
<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="dummy"></div>
<div class="item"></div>
<div class="item"></div>
</div>
</body>
</html>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
