Column Count 3 never leaves a row with 1 item

Question

I've noticed that when I use column-count: 3 in my code and I have 7 items for example. The first two columns will have 3 elements each and the third column will have only one element (see picture for example).

Is this the normal behavior of column-count, or should column-count be filling all column equally?

UPDATED-

I tried messing around with caiovisk answer and I changed the code from li elements to divs since that is what I am working with.

That seems to work great but in my situation sometimes elements might be bigger than others causing gaps (see the picture below). How do you fix this issue using the flex method?

.columns-3 {
  flex-basis: calc(33.33% - 20px);
  margin: 10px;
 }
 .redBox {
  height: 50px;
  background-color: red;
 }
 .bigger {
  height: 150px;
 }

<div class="columns">
  <div class="columns-3 redBox bigger"></div>
  <div class="columns-3 redBox"></div>
  <div class="columns-3 redBox"></div>
  <div class="columns-3 redBox bigger"></div>
  <div class="columns-3 redBox"></div>
  <div class="columns-3 redBox"></div>
  <div class="columns-3 redBox"></div>
  <div class="columns-3 redBox"></div>
  <div class="columns-3 redBox bigger"></div>
  <div class="columns-3 redBox"></div>
  <div class="columns-3 redBox"></div>
  <div class="columns-3 redBox"></div>
  <div class="columns-3 redBox"></div>
 </div>

Check if you got `position:relative;` on the (I assume) li element. Remove it, if you have it. — lol25500, Feb 26 '19 at 00:49
Where is your code?? pl;ease read: [How to create a Minimal, Complete, and Verifiable example](https://stackoverflow.com/help/mcve) — caiovisk, Feb 26 '19 at 00:51

score 0 · Answer 1 · answered Feb 26 '19 at 00:57

0

Check if you got position:relative; on the (I assume) li element.

answered Feb 26 '19 at 00:57

lol25500

92
8

I do have relative positioning. What positioning should it be? – Andrew Feb 26 '19 at 14:03
Remove it. Make an element inside the li, "holding" the element that require position: relative; – lol25500 Feb 26 '19 at 15:03

caiovisk · Answer 2 · 2019-02-26T23:46:45.757

Yes, it is normal behaviour. It will separate the elements or content by the specified value on column-count then display it in columns. If you are using ul, ol, div or any elements that is not a text it will place them vertically, which may not be the desired result, but for text it make absolutely sense. see docs: https://drafts.csswg.org/css-multicol-1/#cc

If you would like to divide your inner elements into columns and divide it horizontally, you can use the flexbox, see approach below:

.columns{
    display: flex;
    flex-wrap: wrap;
}
.columns-2 li {
    flex-basis: 50%;
}
.columns-3 li {
    flex-basis: 33.3334%;
}
.columns-4 li {
    flex-basis: 25%;
}

<h1>2 Columns</h1>
<ul class="columns columns-2">
<li>Column 1</li>
<li>Column 2</li>
<li>Column 3</li>
<li>Column 4</li>
<li>Column 5</li>
<li>Column 6</li>
<li>Column 7</li>
</ul>
<h1>3 Columns</h1>
<ul class="columns columns-3">
<li>Column 1</li>
<li>Column 2</li>
<li>Column 3</li>
<li>Column 4</li>
<li>Column 5</li>
<li>Column 6</li>
<li>Column 7</li>
</ul>
<h1>4 Columns</h1>
<ul class="columns columns-4">
<li>Column 1</li>
<li>Column 2</li>
<li>Column 3</li>
<li>Column 4</li>
<li>Column 5</li>
<li>Column 6</li>
<li>Column 7</li>
</ul>

EDITED:

As per the answer edit, you have set height: 50px; to your .redbox and it is limiting the element to fill the height. Set it to min-height: 50px;

.redBox {
        min-height: 50px;
        ...
}

.columns {
  display: flex;
    flex-flow: wrap;
}
.columns.columns-3 > div {
    flex-basis: calc(33.33% - 20px);
    margin: 10px;
}
.columns.redBox > div {
    min-height: 50px;
    background-color: red;
}
.bigger {
    height: 150px;
}

<div class="columns columns-3 redBox">
  <div class="bigger"></div>
  <div></div>
  <div></div>
  <div></div>
  <div class="bigger"></div>
  <div></div>
  <div></div>
  <div></div>
  <div class="bigger"></div>
  <div></div>
</div>

Hello caiovisk! Thank you for the answer. I had a follow up question and updated my original question. Thank you! — Andrew, Feb 26 '19 at 14:02

Column Count 3 never leaves a row with 1 item

2 Answers2