Css column-count should respect only first child

Question

I'm trying to use the column-count to make a kind of week calendar to user tasks.

The main div of the week has the property of column-count to 7 and ALWAYS there will 7 childs. The seven days of this week. Inside this days there are the tasks, but the number of tasks is variable and it break the column-count logic.

Why column-count not consider just the first childs inside it?

Here's an example of what I'm saying: https://jsfiddle.net/nby5ctb2/

On the second list, I wanted the tasks 1, 1.1 and 1.2 on top of each other, and when there are no childs just skip these day.

The css I used was just this:

.week {
    -moz-column-count: 7;
    -webkit-column-count: 7;
    column-count: 7;
}

Thanks advanced

Answer 1

You seem to have misunderstood the purpose of column-count and are therefore misusing it.

Its purpose is to take some content and divide it into the given number of columns with as close to equal amounts of content as possible. The only tool you have is break-inside:avoid to keep "block-like" content together.

But if you do use it to make one column taller than the rest, your are making all columns the same height, because that's what CSS columns does. So, for example, using break-inside:avoid on .day. will cause other shorter .days to pile up in the same column. It would only work if days in your week had equal amounts of content, which is clearly not the case.

First question that comes in mind is: why not use flex? Since you probably want your day's widths equal, you need to add width to the children. By default display:flex children have flex: 0 1 auto, which makes them flexible, depending on contents.

.week {
    display: flex;
}
.week > * {
  width: calc(100% / 7)
}

Fiddle.

Answer 2

You seem to have misunderstood the purpose of column-count and are therefore misusing it.

Its purpose is to take some content and divide it into the given number of columns with as close to equal amounts of content as possible. The only tool you have is break-inside:avoid to keep "block-like" content together.

But if you do use it to make one column taller than the rest, your are making all columns the same height, because that's what CSS columns does. So, for example, using break-inside:avoid on .day. will cause other shorter .days to pile up in the same column. It would only work if days in your week had equal amounts of content, which is clearly not the case.

First question that comes in mind is: why not use flex? Since you probably want your day's widths equal, you need to add width to the children. By default display:flex children have flex: 0 1 auto, which makes them flexible, depending on contents.

.week {
    display: flex;
}
.week > * {
  width: calc(100% / 7)
}

Fiddle.

Answer 3

CSS Column is not the best solution to accomplish that. It strives to flow the content column wise, from left to right, and what you ask is to fight against it.

I recommend you use i.e. Flexbox, which does that very simple, and with better browser support.

.week {
  display: flex;
  flex-wrap: wrap;
}
.week .day {
  flex-basis: calc(100% / 7);
  word-break: break-all;
  overflow: hidden;
}

This works
<div class='week'>
    <div class="day">
        <div class="task" >Task 1</div>
    </div>
    <div class="day">
        <div class="task" >Task 2</div>
    </div>
    <div class="day">
        <div class="task" >Task 3</div>
    </div>
    <div class="day">
        <div class="task" >Task 4</div>
    </div>
    <div class="day">
        <div class="task" >Task 5</div>
    </div>
    <div class="day">
        <div class="task" >Task 6</div>
    </div>
    <div class="day">
        <div class="task" >Task 7</div>
    </div>
</div>

<br />
<br />

This <strike>doesn't</strike> work too, now
<div class='week'>
    <div class="day">
        <div class="task" >Task 1</div>
        <div class="task" >Task 1.1</div>
        <div class="task" >Task 1.2</div>
    </div>
    <div class="day">
        <div class="task" >Task 2</div>
    </div>
    <div class="day">
    </div>
    <div class="day">
    </div>
    <div class="day">
        <div class="task" >Task 5</div>
        <div class="task" >Task 5.1</div>
    </div>
    <div class="day">
    </div>
    <div class="day">
    </div>
</div>