0

I'm having some issues with using columns in CSS. I wanted to set column-count: 6; but it result only in 5 columns. It seems to be working fine for values <=5 but when I try to set something higher it produces weird results. Column-count doesn't match.

.columns {
  column-count: 6;
}
.columns__item {
  display: inline-block;
  background: #fff;
  width: 100%;
  padding: 5px;
  margin-bottom: 10px;
}
<ul class="columns">
    <li class="columns__item">Item 1</li>
    <li class="columns__item">Item 2</li>
    <li class="columns__item">Item 3</li>
    <li class="columns__item">Item 4</li>
    <li class="columns__item">Item 5</li>
    <li class="columns__item">Item 6</li>
    <li class="columns__item">Item 7</li>
    <li class="columns__item">Item 8</li>
    <li class="columns__item">Item 9</li>
    <li class="columns__item">Item 10</li>
    <li class="columns__item">Item 11</li>
    <li class="columns__item">Item 12</li>
    <li class="columns__item">Item 13</li>
    <li class="columns__item">Item 14</li>
</ul>

Here is the fiddle: https://jsfiddle.net/btqxd20r/1/. I'm testing it in Chrome.

TylerH
  • 20,799
  • 66
  • 75
  • 101
Krystian
  • 996
  • 9
  • 24

1 Answers1

0

It might be the display: inline-block; issue, Increase your items to 40 or 50 and then check, it works correctly.. here is the updated fiddle https://jsfiddle.net/btqxd20r/2/

UPDATE:

Use float: left set width in pixels to display your items in a rows and if you want to make it responsive for devices. Keep in mind that you should use clear:both css after ending of float divs...

Arpit Shrivastava
  • 346
  • 2
  • 6
  • Thanks for your answer. Maybe this is not the best example I created. Basically what I want to achieve is to have Pinterest like layout. The problem is that I have different height's of the elements. Please see updated fiddle here: https://jsfiddle.net/btqxd20r/4/ As you can see item is in two columns, but it should be in one column. Adding `display: inline-block` is fixing this problem. `float: left` is not the way to go in such situation – Krystian Aug 12 '16 at 15:04
  • You could find some useful links to achieve that, like this [link](http://cssdeck.com/labs/css-only-pinterest-style-columns-layout) – Arpit Shrivastava Aug 12 '16 at 15:13