Top-Bottom-Left-Right-Top-Left-Right-Top-Bottom content flow with CSS

Question

I'd like to have css blocks that organize from top to bottom and from left to right.

To better explain this is an image with what I've got 'till now and what I'd like to achieve with CSS:

Here is the code:

HTML:

<div id="container">
<div class="box" style="background-color: #000;">1</div>
<div class="box" style="background-color: #fff;">2</div>
<div class="box" style="background-color: #000;">3</div>
<div class="box" style="background-color: #fff;">4</div>
<div class="box" style="background-color: #000;">5</div>
<div class="box" style="background-color: #fff;">6</div>
<div class="box" style="background-color: #000;">7</div>
<div class="box" style="background-color: #fff;">8</div>
<div class="box" style="background-color: #000;">9</div>
</div

The CSS:

#container {height: 200px; background-color: #2795b6;}
.box {color: red; display: block;height:50px;width:50px}

And here is the JsFiddle: http://jsfiddle.net/ySG5Y

This is part of a horizontal infinite scrolling page I'm trying to make. Now that you know you can better understand the situation.

I hope someone is able to help me in any way, and forgive me for my not-so-great knowledge.

Thanks

Ps. Now I know that there are some other questions which may seem like a duplicate. I don't know but I'd like to integrate this in horizontal infinite scrolling so I believe that this may be a "original question".

After all I had no idea about describing this so those showed after the publishing.

Answer 1

I would use one more grouping (per 4 elements)

<div id="container">
    <div class="group">
        <div class="box">1</div>
        <div class="box">2</div>
        <div class="box">3</div>
        <div class="box">4</div>
    </div>
    <div class="group">
        <div class="box">5</div>
        <div class="box">6</div>
        <div class="box">7</div>
        <div class="box">8</div>
    </div>
    <div class="group">
        <div class="box">9</div>
    </div>
</div>

and use

#container {
    height: 200px;
    background-color: #2795b6;
    font-size:0; /*to ignore whitespace due to inline-block of group elements*/
    white-space:nowrap; /*to avoid wrapping of groups once they fill their container*/
}
.group{
    position:relative;
    display:inline-block; /*make them stack horizontally*/
    width:50px;
    height:200px;
    font-size:16px;
    vertical-align:top;
}
/*for the even groups set the box elements to absolute and reverse order*/
.group:nth-child(even) .box{position:absolute;left:0;}
.group:nth-child(even) .box:nth-child(1){bottom:0;}
.group:nth-child(even) .box:nth-child(2){bottom:50px;}
.group:nth-child(even) .box:nth-child(3){bottom:100px;}
.group:nth-child(even) .box:nth-child(4){bottom:150px;}

.box {
    color: red;
    display: block;
    height:50px;
    width:50px;
    text-align:center;
    line-height:50px;
    background:black;
}
.box:nth-child(even) {background:white;}

Demo at http://codepen.io/gpetrioli/pen/qAIKd

This will produce