CODEWITHSUNDEEP
css
Dmytro Pastovenskyi
Dmytro Pastovenskyi

Reputation: 5419

Column-count does not split content on defined number of columns

I have a list which I want to split on columns.

<div class="newspaper">
  <ul>
    <li><span>eleemt 1</span>  
    <li><span>eleemt 2</span>  
    <li><span>eleemt 3</span>  
    <li><span>eleemt 4</span>   
    <li><span>eleemt 5</span>   
    <li><span>eleemt 6</span>          
  </ul>
</div>

CSS

.newspaper ul {
    -webkit-column-count: 5;
    -moz-column-count: 5;
    column-count: 5;
}

Output is a bit different from what I expected (there are only 3 columns + spaces for 2 more).

enter image description here

Here is my example with column-count on jsfiddle

Questions:

  1. Is it normal behaviour?
  2. Is it possible to change that behaviour, so I have 5 columns (or whatever number I specify)?

Thanks.

Upvotes: 2

Views: 151

Answers (2)

Gabriele Petrioli
Gabriele Petrioli

Reputation: 195982

Columns are filled vertically first.

So now that you have 6 elements but only five columns it means that one column will have two rows (its height will increase to fit them). But since all columns follow the same setup, once the height of a columns is increased, it is increased for all columns.

And since the fill vertically the first can fit 2, the second 2, the third 2, ...

It is the normal way columns work.

So you do have 5 columns, it is just that the last two are empty.

Upvotes: 2

Mave
Mave

Reputation: 2516

It's because 5 is less than 6, and 6 isn't divisible by 5, as you have six entries. Add more entries, or change the column count -- it'll work properly then. See updated fiddle.

<div class="newspaper">
  <ul>
    <li>  
      <span>eleemt 1</span>  
    </li>
    <li>  
      <span>eleemt 2</span>  
    </li>
    <li>  
      <span>eleemt 3</span>  
    </li>
    <li>  
      <span>eleemt 4</span>  
    </li>
    <li>  
      <span>eleemt 5</span>  
    </li>
    <li>  
      <span>eleemt 6</span>  
    </li>
    <li>  
      <span>eleemt x</span>  
    </li>
    <li>  
      <span>eleemt x</span>  
    </li>
    <li>  
      <span>eleemt x</span>  
    </li>
    <li>  
      <span>eleemt x</span>  
    </li>
    <li>  
      <span>eleemt x</span>  
    </li>
    <li>  
      <span>eleemt x</span>  
    </li>
    <li>  
      <span>eleemt x</span>  
    </li>
    <li>  
      <span>eleemt x</span>  
    </li>
    <li>  
      <span>eleemt x</span>  
    </li>
    <li>  
      <span>eleemt x</span>  
    </li>
  </ul>
</div>

Upvotes: 1

Related Questions