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:
Does anyone know a simple solution for this?
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.
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 .
Definition of column rule : a rule usually of exact column length used between columns of a page or table.
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.
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>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With