Can I order my CSS columns horizontally instead of vertically?

Question

Here is my code:

.column {
    column-count: 4;
    column-gap: 10px;
    -moz-column-count: 4;
    -moz-column-gap: 10px;
    -webkit-column-count: 4;
    -webkit-column-gap: 10px;
}

<div class="column">
    <div class="inner">1</div>
    <div class="inner">2</div>
    <div class="inner">3</div>
    <div class="inner">4</div>
    <div class="inner">5</div>
    <div class="inner">6</div>
    <div class="inner">7</div>
    <div class="inner">8</div>
    <div class="inner">9</div>
    <div class="inner">10</div>
    <div class="inner">11</div>
    <div class="inner">12</div>
</div>

The result is:
1 4 7 10
2 5 8 11
3 6 9 12

What I want is:
1 2 3 4
5 6 7 8
9 10 11 12

Is that possible? How should I make it?

This post might be somewhat helpful: http://css-tricks.com/forums/discussion/23914/re-arrange-default-column-order-css3-columns/ — rink.attendant.6, Jun 26 '13 at 15:24
The link is dead, any chance you have an offline version of it? — alecive, Sep 09 '19 at 19:57

Alex Char · Accepted Answer · 2018-09-03T06:31:34.590

18

Is even easier:

.inner:nth-child(4n+1) {
    clear: left;
}

.inner {
    float: left;
    margin: 5px;
}

<div class="column">
    <div class="inner">1</div>
    <div class="inner">2</div>
    <div class="inner">3</div>
    <div class="inner">4</div>
    <div class="inner">5</div>
    <div class="inner">6</div>
    <div class="inner">7</div>
    <div class="inner">8</div>
    <div class="inner">9</div>
    <div class="inner">10</div>
    <div class="inner">11</div>
    <div class="inner">12</div>
</div>

You can apply float: left and clear float: left every 4n+1 elements.

Ref:

:nth-child

edited Sep 03 '18 at 06:31

answered Sep 25 '14 at 18:12

Alex Char

32,879
9
49
70

1
I found this solution applied nicely also to a long `
– mrcoulson May 22 '16 at 18:23
3

This is okay but it doesn't allow for different height elements. – jscul Feb 11 '18 at 02:43
Love this solution. Any way of allowing different height? – Pluda Jan 15 '20 at 11:36
I couldn't make this work with `
– Ela782 May 05 '20 at 21:29
Also I think this solution is not very friendly to responsive design. If say you choose 4 columns, but then you make the browser window less wide to only fit 3 or 2 columns, then items will be misaligned and you'll have gaps with no items. Which makes sense, since what then physically fits on the screen no longer matches the `(4n+1)`. – Ela782 May 05 '20 at 21:36

score 1 · Answer 2 · edited May 23 '17 at 12:10

1

I actually put some effort forward this time. ignore everything from previous edit

the display property's inline-blocks is probably what you want to use.

Here is a thorough guide on how to use it

And here's a brief demo

li {
    width: 200px;
    display: inline-block;
}

edited May 23 '17 at 12:10

Community

1
1

answered Jun 26 '13 at 15:01

Stephan

16,509
7
35
61

@CallMeAhLun You dont think that it would work or that a better solution exists? The former seems more likely which makes me sad – Stephan Jun 26 '13 at 15:55
I looking for a better solution and the answer you gave me isn't a better solution. I need work in CMS, I need it in dynamic. – Alan Yong Jun 27 '13 at 03:29
@CallMeAhLun well you should have mentioned that i'll do some research for ya – Stephan Jun 27 '13 at 03:37
@CallMeAhLun there ya go, thats a real answer this time – Stephan Jun 27 '13 at 04:04
that is the different thing I want. – Alan Yong Jun 28 '13 at 06:01

max bugaenko · Answer 3 · 2014-03-31T15:56:06.710

1

Mansonry.js is the solution. Check this out http://masonry.desandro.com/ Also check out this demo. This is what you need i guess.. I am also trying to implement such thing :) http://tympanus.net/Development/GridLoadingEffects/index2.html

As far as I know there's no way to do this with CSS only which is sad

edited Mar 31 '14 at 15:56

answered Mar 20 '14 at 03:17

max bugaenko

159
1
13

score -1 · Answer 4 · answered May 22 '14 at 06:25

-1

check my simple codes below url. https://github.com/JJ81/column-count maybe you can have what you want.

answered May 22 '14 at 06:25

jaejun

7
2

4

It's good to include the relevant code in your answer as links aren't future proof. – Patrick May 22 '14 at 07:00

score -1 · Answer 5 · edited Jan 19 '18 at 22:02

-1

Apply this:

.column { 
  width: 100px; 
  overflow:hidden;
} 
.column .inner {
  width:  20px; 
  float:left; 
  text-align:center;
}

edited Jan 19 '18 at 22:02

Victor

13,914
19
78
147

answered Sep 25 '14 at 17:51

Venk

34
4

1

could you explain in the body of your answer? – Russia Must Remove Putin Sep 25 '14 at 18:31

Can I order my CSS columns horizontally instead of vertically?

5 Answers5

Linked