Chrome columns bug when number of columns is less then column-count - css

Question

I'm having an issue with Chrome when I use the column-count property. I have a div where inside it I will have some items so I set column-count: 3;
When I have 3 items or more it works well, but when I have only two they are not shown in the same row but in the same column. This happens only on Chrome.
code example:
.userinfo-content .grid-view.author-profile-tabs {
.column-count(3);
.column-gap(30);
.article {
position:relative;
display: inline-block;
margin-bottom: 40px;
width: 100%;
line-height: 1.3;
}
}

Answer 1

Based on how your markup looks like, the break-inside: avoid-column; should fix that, together with usingdisplay: block instead of display: inline-block (and you can drop width: 100%)
.outer {
-webkit-column-count: 3;
-moz-column-count: 3;
column-count: 3;
-webkit-column-gap: 30px;
-moz-column-gap: 30px;
column-gap: 30px;
}
.inner {
position: relative;
display: block;
margin-bottom: 40px;
line-height: 1.3;
break-inside: avoid-column;
}
.inner:nth-child(even) {
background: lightgray;
}
<div class="outer">
<div class="inner">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
</div>
<div class="inner">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
</div>
</div>
Updated based on a comment
In this case, to defeat that bottom margin issue, you need a wrapper so you can give the outer a negative margin-top, and then you use margin-top on the items instead of margin-bottom.
.outer {
-webkit-column-count: 3;
-moz-column-count: 3;
column-count: 3;
-webkit-column-gap: 30px;
-moz-column-gap: 30px;
column-gap: 30px;
margin-top: -30px;
}
.inner {
position: relative;
display: block;
margin-top: 30px;
line-height: 1.3;
break-inside: avoid-column;
}
.inner:nth-child(even) {
background: lightgray;
}
<div class="wrapper">
<div class="outer">
<div class="inner">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
</div>
<div class="inner">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
</div>
<div class="inner">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
</div>
<div class="inner">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
</div>
<div class="inner">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
</div>
</div>
</div>
If it's a 3 columns layout you want, flexbox does that better and have better browser support
.outer {
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
padding-left: 20px;
}
.inner {
width: calc(33.33% - 20px);
margin: 0 20px 20px 0;
line-height: 1.3;
}
.inner:nth-child(even) {
background: lightgray;
}
<div class="outer">
<div class="inner">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
</div>
<div class="inner">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
</div>
<div class="inner">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
</div>
<div class="inner">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
</div>
</div>