6

I want to change the order of the columns here:

#container {
    position: relative;
    width: 600px;
}

#column-wrapper {
    -webkit-column-count: 3;
    -moz-column-count: 3;
    column-count: 3;
    -webkit-column-gap: 20px; 
    -moz-column-gap: 20px;
    column-gap: 20px;
}

#column-wrapper .column {
    display: inline-block;
    width: 100%;
    padding: 20px 0;
    margin-bottom: 20px;
    background-color: green;
    text-align: center;
    font-size: 20px;
    font-weight: bold;
    color: #fff;
}
<div id="container">

    <div id="column-wrapper">
        
        <div class="column">
            <span>1</span>
        </div>
        
        <div class="column">
            <span>2</span>
        </div>
        
        <div class="column">
            <span>3</span>
        </div>
        
        <div class="column">
            <span>4</span>
        </div>
        
         <div class="column">
            <span>5</span>
        </div>
        
         <div class="column">
            <span>6</span>
        </div>
        
    </div>
    
</div>

The result should be this: Column Count

Does anyone know a simple solution for this?

Denys Séguret
  • 372,613
  • 87
  • 782
  • 758
Nepo Znat
  • 3,000
  • 5
  • 28
  • 49

3 Answers3

7

Why are you using columns when you want a row based order ? Looks like a job for the flex model. Without changing your HTML you can do this:

#container {
    position: relative;
    width: 600px;
}

#column-wrapper {
    display: flex;
    flex-wrap: wrap
}

#column-wrapper .column {
    display: inline-block;
    width: calc(30% - 20px);
    padding: 20px 0;
    margin: 20px;
    background-color: green;
    text-align: center;
    font-size: 20px;
    font-weight: bold;
    color: #fff;
}
<div id="container">

    <div id="column-wrapper">
        
        <div class="column">
            <span>1</span>
        </div>
        
        <div class="column">
            <span>2</span>
        </div>
        
        <div class="column">
            <span>3</span>
        </div>
        
        <div class="column">
            <span>4</span>
        </div>
        
         <div class="column">
            <span>5</span>
        </div>
        
         <div class="column">
            <span>6</span>
        </div>
        
    </div>
    
</div>
Denys Séguret
  • 372,613
  • 87
  • 782
  • 758
  • 2
    Is there any way to get this to work when flex-items ("column") align in this way, even when they have different heights?! :) – Alisso Jul 16 '15 at 14:52
0

You don't need to use column show in CSS. Use float instead, it's natural document flow.

.column {float: left; width: 140px;}
.column:nth-child(3n+2) {margin: 0 20px;}
.column:nth-child(3) ~ .column {margin-top: 20px;}

http://jsfiddle.net/70nk1a1n/1/

pavel
  • 26,538
  • 10
  • 45
  • 61
  • In this example yes. But in my project the width of the #container is flexible. – Nepo Znat May 25 '15 at 08:04
  • @ironman: so you can use `%` in width and margins/paddings :-) Everything is possible, but when you need to show bloks from left to right (natural document flow), it's non-sense to use column grid to do it. – pavel May 25 '15 at 08:05
  • Ok, that's true :) But if I have 100 rows, there are problems with the margin or? – Nepo Znat May 25 '15 at 08:10
  • @ironman: really don't know, what you have there :-). It works with many rows, I've just changed `px` to `%`. - http://jsfiddle.net/70nk1a1n/2/ – pavel May 25 '15 at 08:15
  • Oops I am sorry. So this is a good solution. And what solution is better :D – Nepo Znat May 25 '15 at 08:19
  • @ironman: solution with flex/columns grid is relatively easy to understand but has smaller browsers support. This solution will work in almost all browsers. Using percents it's responsive, so it's up to you. I use this one, due to the browsers support. – pavel May 25 '15 at 08:21
  • I'll take this one. Thanks again for the effort. – Nepo Znat May 25 '15 at 08:24
0

this is funny, rotate page and content. the edit below describes a pitfall to this for columnCount. the real solution follows

<div ref={this.columns} style={{
 columnCount:Math.round(window.innerWidth*1 / 300)/1,
 transform: "rotate(180deg)"//rotate page, same as scale(-1,-1)
}}>
<div style={{
 transform: "scale(-1,-1)",//flip && reverse column content (parent)
 width:"100%,//so children are not lost when scrolled offscreen y
 breakInside:"none"// "" not pushed to next column when ""
}}></div>
</div>

edit: this seems to break the columnCount unspoken rule of maintaining width:100% and columnGap:"1px" or something on column content, losing the backgroundColor in my case, for some other SO columnCount questions media is lost when scrolled offscreen. I don't believe I can make the component render the rotation first, then apply columnCount to maintain it, so I am 90% sure the only solution is to reverse your sort and use parent.scrollTop = parent.scrollHeight - columns.offsetHeight and parent.scrollLeft = parent.scrollWidth - columns.offsetWidth

Nick Carducci for Carface Bank
  • 531
  • 5
  • 16