Column-count is not working in Chrome

Question

I have a text splitted in 4 columns and it works perfectly in Safari I don't know why I can see just 2 columns in Google Chrome.

Tested with Chrome 55.0.2883.95 (64-bit)

Any help would be greatly appreciated.

#people{
 -webkit-column-count:4;
 -moz-column-count:4;
 column-count:4;
 -webkit-column-gap:.5em;
 -moz-column-gap:.5em;
 column-gap:.5em;
 padding-bottom:2px;
 font-size:18px;
 line-height:21px;
}

.keeptogether{
  display:inline-block;
  width:100%
}

<div id=people>
<div class=keeptogether>
A<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
fhdjsklfhs<br>

<br>B<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
<br>C<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
</div>
<div class=keeptogether>
D<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
<br>E<br>
fhdjsklfhs<br>
<br>F<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
<br>G<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
<br>H<br>
fhdjsklfhs<br>
<br>I<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
<br>J<br>
<br>K<br>
fhdjsklfhs<br>
</div>
<div class=keeptogether>
L<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
<br>M<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
<br>N<br>
fhdjsklfhs<br>
<br>O<br>
fhdjsklfhs<br>
<br>P<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
<span class=yes><br></span>
</div>
<div class=keeptogether>
Q<br>
<br>R<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
<br>S<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
<br>T<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
<br>U<br>
<br>V<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
<br>W<br>
<br>X<br>
<br>Y<br>
fhdjsklfhs<br>
<br>Z<br>
fhdjsklfhs<br>
</div>
</div>

If it is not working in the latest Chrome then it must be some sort of regression. In an older version of Chrome, I do see 4 columns. — Harry, Feb 01 '17 at 17:19
A regression indeed. There's a workaround - using `break-inside: avoid-column` rule, like in [this demo](https://jsfiddle.net/spng58tb/1/) - but it seems to be not supported by Firefox. — raina77ow, Feb 01 '17 at 17:33
@raina77ow I've tried that break-inside but it still doesn't work as it should — Federico, Feb 01 '17 at 17:39
In addition, it seems that Chrome does not support columnar layout for the `
` element. — J Cracknell, Aug 08 '18 at 20:04

score 9 · Accepted Answer · answered Mar 21 '17 at 15:21

Add display: flex; to your #people id in your css:

#people{
  display: flex;
 -webkit-column-count: 4; /* Chrome, Safari, Opera */
 -moz-column-count: 4; /* Firefox */
 column-count: 4;
 -webkit-column-gap:.5em;
 -moz-column-gap:.5em;
 column-gap:.5em;
 padding-bottom:2px;
 font-size:18px;
 line-height:21px;
}

.keeptogether{
  display:inline-block;
  width:100%;
}

<div id=people>
  <div class="keeptogether">
  A<br>
  fhdjsklfhs<br>
  fhdjsklfhs<br>
  fhdjsklfhs<br>
  fhdjsklfhs<br>
  fhdjsklfhs<br>
  fhdjsklfhs<br>
  fhdjsklfhs<br>
  fhdjsklfhs<br>
  fhdjsklfhs<br>
  fhdjsklfhs<br>
  fhdjsklfhs<br>
  fhdjsklfhs<br>
  fhdjsklfhs<br>

  <br>B<br>
  fhdjsklfhs<br>
  fhdjsklfhs<br>
  fhdjsklfhs<br>
  <br>C<br>
  fhdjsklfhs<br>
  fhdjsklfhs<br>
  fhdjsklfhs<br>
  fhdjsklfhs<br>
  fhdjsklfhs<br>
  fhdjsklfhs<br>
  </div>
  <div class="keeptogether">
  D<br>
  fhdjsklfhs<br>
  fhdjsklfhs<br>
  fhdjsklfhs<br>
  fhdjsklfhs<br>
  fhdjsklfhs<br>
  fhdjsklfhs<br>
  <br>E<br>
  fhdjsklfhs<br>
  <br>F<br>
  fhdjsklfhs<br>
  fhdjsklfhs<br>
  fhdjsklfhs<br>
  fhdjsklfhs<br>
  <br>G<br>
  fhdjsklfhs<br>
  fhdjsklfhs<br>
  fhdjsklfhs<br>
  fhdjsklfhs<br>
  fhdjsklfhs<br>
  <br>H<br>
  fhdjsklfhs<br>
  <br>I<br>
  fhdjsklfhs<br>
  fhdjsklfhs<br>
  <br>J<br>
  <br>K<br>
  fhdjsklfhs<br>
  </div>
  <div class="keeptogether">
  L<br>
  fhdjsklfhs<br>
  fhdjsklfhs<br>
  fhdjsklfhs<br>
  fhdjsklfhs<br>
  fhdjsklfhs<br>
  fhdjsklfhs<br>
  fhdjsklfhs<br>
  fhdjsklfhs<br>
  fhdjsklfhs<br>
  fhdjsklfhs<br>
  fhdjsklfhs<br>
  fhdjsklfhs<br>
  <br>M<br>
  fhdjsklfhs<br>
  fhdjsklfhs<br>
  fhdjsklfhs<br>
  fhdjsklfhs<br>
  fhdjsklfhs<br>
  fhdjsklfhs<br>
  fhdjsklfhs<br>
  fhdjsklfhs<br>
  fhdjsklfhs<br>
  fhdjsklfhs<br>
  fhdjsklfhs<br>
  <br>N<br>
  fhdjsklfhs<br>
  <br>O<br>
  fhdjsklfhs<br>
  <br>P<br>
  fhdjsklfhs<br>
  fhdjsklfhs<br>
  <span class="yes"><br></span>
  </div>
  <div class="keeptogether">
  Q<br>
  <br>R<br>
  fhdjsklfhs<br>
  fhdjsklfhs<br>
  fhdjsklfhs<br>
  fhdjsklfhs<br>
  fhdjsklfhs<br>
  <br>S<br>
  fhdjsklfhs<br>
  fhdjsklfhs<br>
  fhdjsklfhs<br>
  fhdjsklfhs<br>
  fhdjsklfhs<br>
  <br>T<br>
  fhdjsklfhs<br>
  fhdjsklfhs<br>
  fhdjsklfhs<br>
  <br>U<br>
  <br>V<br>
  fhdjsklfhs<br>
  fhdjsklfhs<br>
  fhdjsklfhs<br>
  <br>W<br>
  <br>X<br>
  <br>Y<br>
  fhdjsklfhs<br>
  <br>Z<br>
  fhdjsklfhs<br>
  </div>
</div>

Hope it helped

Still the easiest solution (that actually works) over 5 years later! — derpedy-doo, Oct 07 '22 at 11:35
Flex is similar, but the end result is not quite the same, depending on your data. Flex will wrap divs below the longest div on the previous row, potentially leaving large gaps, whereas columns will leave no such gaps. — Vincent, Mar 13 '23 at 18:27

score 8 · Answer 2 · answered Mar 23 '17 at 10:54

Replace display:inline-block by display:block.

According to caniuse, for Chrome issue, you should add -webkit-perspective:1; on the container.

#people{
 -webkit-column-count:4;
 -moz-column-count:4;
 column-count:4;
 -webkit-column-gap:.5em;
 -moz-column-gap:.5em;
 column-gap:.5em;
 padding-bottom:2px;
 font-size:18px;
 line-height:21px;
 -webkit-perspective:1;
}

.keeptogether{
  display:block;
  width:100%
}

<div id=people>
<div class=keeptogether>
A<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
fhdjsklfhs<br>

<br>B<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
<br>C<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
</div>
<div class=keeptogether>
D<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
<br>E<br>
fhdjsklfhs<br>
<br>F<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
<br>G<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
<br>H<br>
fhdjsklfhs<br>
<br>I<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
<br>J<br>
<br>K<br>
fhdjsklfhs<br>
</div>
<div class=keeptogether>
L<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
<br>M<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
<br>N<br>
fhdjsklfhs<br>
<br>O<br>
fhdjsklfhs<br>
<br>P<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
<span class=yes><br></span>
</div>
<div class=keeptogether>
Q<br>
<br>R<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
<br>S<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
<br>T<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
<br>U<br>
<br>V<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
<br>W<br>
<br>X<br>
<br>Y<br>
fhdjsklfhs<br>
<br>Z<br>
fhdjsklfhs<br>
</div>
</div>

score 3 · Answer 3 · answered Mar 23 '17 at 05:12

If you add display: flex; to #people ID, then it works fine in all the browsers and you don't need display:inline-block; for .keeptogether class.

You can check the code snippet:

#people {
 -webkit-column-count:4;
 -moz-column-count:4;
 column-count:4;
 -webkit-column-gap:.5em;
 -moz-column-gap:.5em;
 column-gap:.5em;
 display: flex;
 padding-bottom:2px;
 font-size:18px;
 line-height:21px;
}

.keeptogether {
  width:100%
}

<div id=people>
<div class=keeptogether>
A<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
fhdjsklfhs<br>

<br>B<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
<br>C<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
</div>
<div class=keeptogether>
D<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
<br>E<br>
fhdjsklfhs<br>
<br>F<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
<br>G<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
<br>H<br>
fhdjsklfhs<br>
<br>I<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
<br>J<br>
<br>K<br>
fhdjsklfhs<br>
</div>
<div class=keeptogether>
L<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
<br>M<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
<br>N<br>
fhdjsklfhs<br>
<br>O<br>
fhdjsklfhs<br>
<br>P<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
<span class=yes><br></span>
</div>
<div class=keeptogether>
Q<br>
<br>R<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
<br>S<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
<br>T<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
<br>U<br>
<br>V<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
<br>W<br>
<br>X<br>
<br>Y<br>
fhdjsklfhs<br>
<br>Z<br>
fhdjsklfhs<br>
</div>
</div>

I hope it helps.

score 1 · Answer 4 · answered Mar 21 '17 at 06:11

Why do you need to give display: inline-block ? the concept of using column property is to divide your whole given content into equal width columns. So if you remove your inner-div, the all content gets properly aligned into given number of columns.

This also works, if you remove inline-block from your current code.

#people {
  -webkit-column-count: 4;
  -moz-column-count: 4;
  column-count: 4;
  -webkit-column-gap: .5em;
  -moz-column-gap: .5em;
  column-gap: .5em;
  padding-bottom: 2px;
  font-size: 18px;
  line-height: 21px;
}


/* you don't need this property
.keeptogether {
  display: inline-block;
  width: 100%;
}
*/

<div id="people">
  A<br> fhdjsklfhs
  <br> fhdjsklfhs
  <br> fhdjsklfhs
  <br> fhdjsklfhs
  <br> fhdjsklfhs
  <br> fhdjsklfhs
  <br> fhdjsklfhs
  <br> fhdjsklfhs
  <br> fhdjsklfhs
  <br> fhdjsklfhs
  <br> fhdjsklfhs
  <br> fhdjsklfhs
  <br> fhdjsklfhs
  <br>

  <br>B<br> fhdjsklfhs
  <br> fhdjsklfhs
  <br> fhdjsklfhs
  <br>
  <br>C<br> fhdjsklfhs
  <br> fhdjsklfhs
  <br> fhdjsklfhs
  <br> fhdjsklfhs
  <br> fhdjsklfhs
  <br> fhdjsklfhs
  <br> D
  <br> fhdjsklfhs
  <br> fhdjsklfhs
  <br> fhdjsklfhs
  <br> fhdjsklfhs
  <br> fhdjsklfhs
  <br> fhdjsklfhs
  <br>
  <br>E<br> fhdjsklfhs
  <br>
  <br>F<br> fhdjsklfhs
  <br> fhdjsklfhs
  <br> fhdjsklfhs
  <br> fhdjsklfhs
  <br>
  <br>G<br> fhdjsklfhs
  <br> fhdjsklfhs
  <br> fhdjsklfhs
  <br> fhdjsklfhs
  <br> fhdjsklfhs
  <br>
  <br>H<br> fhdjsklfhs
  <br>
  <br>I<br> fhdjsklfhs
  <br> fhdjsklfhs
  <br>
  <br>J<br>
  <br>K<br> fhdjsklfhs
  <br> L
  <br> fhdjsklfhs
  <br> fhdjsklfhs
  <br> fhdjsklfhs
  <br> fhdjsklfhs
  <br> fhdjsklfhs
  <br> fhdjsklfhs
  <br> fhdjsklfhs
  <br> fhdjsklfhs
  <br> fhdjsklfhs
  <br> fhdjsklfhs
  <br> fhdjsklfhs
  <br> fhdjsklfhs
  <br>
  <br>M<br> fhdjsklfhs
  <br> fhdjsklfhs
  <br> fhdjsklfhs
  <br> fhdjsklfhs
  <br> fhdjsklfhs
  <br> fhdjsklfhs
  <br> fhdjsklfhs
  <br> fhdjsklfhs
  <br> fhdjsklfhs
  <br> fhdjsklfhs
  <br> fhdjsklfhs
  <br>
  <br>N<br> fhdjsklfhs
  <br>
  <br>O<br> fhdjsklfhs
  <br>
  <br>P<br> fhdjsklfhs
  <br> fhdjsklfhs
  <br>
  <span class="yes"><br></span> Q
  <br>
  <br>R<br> fhdjsklfhs
  <br> fhdjsklfhs
  <br> fhdjsklfhs
  <br> fhdjsklfhs
  <br> fhdjsklfhs
  <br>
  <br>S<br> fhdjsklfhs
  <br> fhdjsklfhs
  <br> fhdjsklfhs
  <br> fhdjsklfhs
  <br> fhdjsklfhs
  <br>
  <br>T<br> fhdjsklfhs
  <br> fhdjsklfhs
  <br> fhdjsklfhs
  <br>
  <br>U<br>
  <br>V<br> fhdjsklfhs
  <br> fhdjsklfhs
  <br> fhdjsklfhs
  <br>
  <br>W<br>
  <br>X<br>
  <br>Y<br> fhdjsklfhs
  <br>
  <br>Z<br> fhdjsklfhs
  <br>
</div>

score 1 · Answer 5 · answered Feb 13 '18 at 19:25

1

I used a similar method for a WordPress theme. It looks pretty good in Firefox and displays two columns in place of four in Chromium/Chrome for full screen width.

When I increased the number of posts per page (bricks), the number of columns increased to fill up the space.

Chrome seems to render three or more bricks before graduating up to the next column.

answered Feb 13 '18 at 19:25

Jason G.

67
1
10

Yes this problem is still present in 2020; that Chrome (only), refuses to use more than 2 columns unless it features more bricks (6+) – Martin Mar 02 '20 at 10:26

score 1 · Answer 6 · answered Mar 02 '20 at 10:39

After suffering this issue with Chrome 80.0 the solution was from a comment on the question:

.childbrick {
    break-inside: avoid-column;
}

This fixed both the odd lack of columns in Chrome as well as the column splitting which occurred if not using display:inline-block; .

The comment references a Firefox issue with this workaround but I have found no such issues with Firefox version 73.

score 0 · Answer 7 · answered Apr 19 '17 at 12:33

0

From my experience with this issue i found out -webkit needs to come last (Otherwise I guess it tries to use the non webkit and fails)

        column-count: 2; 
        -moz-column-count: 2; 
        -webkit-column-count: 2;

answered Apr 19 '17 at 12:33

petergus

1,192
1
12
18

Column-count is not working in Chrome

7 Answers7

Linked

Related