css columns: last column is not filled [duplicate]

Question

I am trying to use column-count css property to render divs in 4 columns.

But when there are 3n items (3, 6, 9...) in columns wrapper, only three columns get filled, and fourth column is empty!

CSS:

.columns {
    -webkit-column-count: 4; /* Chrome, Safari, Opera */
    -moz-column-count: 4; /* Firefox */
    column-count: 4;
}
.item {
    display: inline-block;
    widtth: 100%;
    border: 1px solid red;
}

HTML:

<div class="columns">
<div class="item">Lorem ipsum dolor sit amet 1</div><div class="item">Lorem ipsum dolor sit amet 2</div><div class="item">Lorem ipsum dolor sit amet 3</div>
<div class="item">Lorem ipsum dolor sit amet 4</div><div class="item">Lorem ipsum dolor sit amet 5</div><div class="item">Lorem ipsum dolor sit amet 6</div>
<div class="item">Lorem ipsum dolor sit amet 7</div><div class="item">Lorem ipsum dolor sit amet 8</div><div class="item">Lorem ipsum dolor sit amet 8</div>
</div>

Here is a JSFiddle.

How do I get elements in all 4 columns?

Kobayashi

I found a solution, which I've added here: https://mcmap.net/q/1366420/-css-column-count-not-respected – Endophyte

Answer 1

In your example, there are 9 elements of equal size to be distributed into 4 columns. Since they won't fit into 4 columns when the first column contains 2 elements (which would add up to a maximum of 8), the first column will contain 3 elements. That defines the height of the container, so the second column will also get 3 elements, and so there's also 3 remaining for the third column and none for the fourth column. There are four columns, but the fourth one is simply empty...

In other words: The height of the container is determined by the minimum height which is needed to fit all elements into the number of columns. Once that is done, the content will be filled into the columns starting from the left, and each column will get as much content as fits into it.

ADDITION AFTER COMMENT:

To get a distribution of elements as you want it, you have to insert empty DIVs - there is no other way (reason: read above):

.columns {
  -webkit-column-count: 4;
  /* Chrome, Safari, Opera */
  -moz-column-count: 4;
  /* Firefox */
  column-count: 4;
}

.item {
  display: inline-block;
  width: 100%;
  border: 1px solid red;
}
.empty {
  display: inline-block;
}

<div class="columns">
  <div class="item">Lorem ipsum dolor sit amet 1</div>
  <div class="item">Lorem ipsum dolor sit amet 2</div>
  <div class="item">Lorem ipsum dolor sit amet 3</div>
  <div class="item">Lorem ipsum dolor sit amet 4</div>
  <div class="item">Lorem ipsum dolor sit amet 5</div>
  <div class="empty"></div>
  <div class="item">Lorem ipsum dolor sit amet 6</div>
  <div class="item">Lorem ipsum dolor sit amet 7</div>
  <div class="empty"></div>
  <div class="item">Lorem ipsum dolor sit amet 8</div>
  <div class="item">Lorem ipsum dolor sit amet 8</div>
</div>

Procrustean

I see, thanks for the link. The question is now how to fix it... – Kobayashi

there's nothing to "fix" - what do you want, i.e. how many elements in which column? – Procrustean

For left ro right: 3,2,2,2. – Kobayashi

please see the addition and the snippet I added to my answer – Procrustean

Thanks, this "kinda" works. But the real (not simplified) result on which I work on looks wierd after this. Seems like css columns are simply not suitable for task "equally distribute block elements over N columns" :( – Kobayashi

Answer 2

Try 'flexbox' display: flex and this now no problem :)

https://jsfiddle.net/bnmkzrkx/4/

I hope help :)

Latonya

While it helps with this particular case, it does not help me, because I am using this layout to render variable height elements. I need multi-column variable height elements placement. – Kobayashi

dont forget about distribution direction, in flexbox the distribution is horizontal, fills one row at a time, whereas in columns it's vertical, fills one column at a time – Larder

Answer 3

It is just a formatting issue. The column CSS is getting confused by the spaces in your code. Someone may be able to give a more technical explenation as to why this happens.

https://jsfiddle.net/bnmkzrkx/1/

.columns {
    -webkit-column-count: 4; /* Chrome, Safari, Opera */
    -moz-column-count: 4; /* Firefox */
    column-count: 4;
}
.item {
    display:inline-block;
    border: 1px solid red;
}

<div class="columns">
<div class="item">Lorem ipsum dolor sit amet 2</div>
<div class="item">Lorem ipsum dolor sit amet 3</div>
<div class="item">Lorem ipsum dolor sit amet 4</div>
<div class="item">Lorem ipsum dolor sit amet 5</div>
<div class="item">Lorem ipsum dolor sit amet 6</div>
<div class="item">Lorem ipsum dolor sit amet 7</div>
<div class="item">Lorem ipsum dolor sit amet 8</div>
<div class="item">Lorem ipsum dolor sit amet 8</div>
</div>

Marvel

You've changed the number of elements, there are 8 elements in your example which is not 3n. – Kobayashi

@Kobayashi Sorry I was just going by your fiddle. CSS3 columns isn't that great at structual content to be honest. It is better for making blocks of text in to columns. I can reproduce the result you are looking for using different techniques if you want. – Marvel