Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

CSS Column Count - Change order

Tags:

html

css

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?

like image 808
Nepo Znat Avatar asked May 25 '15 07:05

Nepo Znat


People also ask

How do you change the order of columns in CSS?

Use grid-row-start , grid-row-end , grid-column-start , grid-column-end , or their shorthands, grid-row and grid-column , to set a grid item's size and location in the grid.

How does CSS column-count work?

If you need an exact numbers of columns when designing a multi-column layout, use column-count . Given the number of columns, the browser will evenly distribute the content in exactly that number of columns. This property can also be used in the shorthand for columns and can be used in tandem with column-width .

What is column rule?

Definition of column rule : a rule usually of exact column length used between columns of a page or table.

Which properties can be used with the column-count property?

The column-count property is one of the CSS3 properties. It has two values: auto and number. "Auto" is the default value of this property. The number of columns is determined by other properties such as column-width.


1 Answers

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>
like image 178
Denys Séguret Avatar answered Sep 29 '22 12:09

Denys Séguret