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