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

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

How does your markup look like? – Asons Feb 17 '17 at 11:41 — Asons, Feb 17 '17 at 11:41

Asons · Accepted Answer · 2017-02-17T13:40:59.170

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>

Thanks for your replay. I know about flex and as well I can do that with a jQuery masonry plugin I just was curios about columns and why this happens only on chrome and not on the other browsers, it works even on Edge :P The first solution resolved the problem but as well with some other issues: When there are only 2 items the `margin-bottom: 40px` is no considered but when they are more than 3 item the margin below the parent div is very large, around 80px. — emilushi, Feb 17 '17 at 12:14
@Eduart Updated with a sample how to fix the bottom margin issue — Asons, Feb 17 '17 at 13:41
Mind that columns have an И-flow, while Flexbox (rows) have Z-flow. Add 1, 2, 3, 4, 5 at the beginning to see the difference between the CSS column and Flexbox solution. — Frank Lämmer, Feb 06 '18 at 13:01
@FrankLämmer Yes, for flex _row_ direction, and for flex _column_ direction it is the same as for CSS Columns, top to bottom. — Asons, Feb 06 '18 at 13:39
Thanks @LGSon. I had non-equal number of list elements in each column i.e. 5 items in the first one, 4 in the second, 5 again in the third etc. The `break-inside: avoid-column;` on an item solved my issue. — Valentine Shi, Sep 09 '18 at 11:14

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

1 Answers1

Linked