css columns: last column is not filled [duplicate]

Question

This question already has answers here:

CSS column-count not respected (4 answers)

Closed 2 years ago.

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?

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>

Answer 2

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>

Answer 3

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

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

I hope help :)