CSS table layout with n rows and expanding as columns - html

Question

I have been struggling with this CSS layout. I have n items that its amount might increase dynamically. And I want to only just have n rows and many or unlimited columns layout.
So, let's say that n is 2 and I have 3 items, This is how my items should look like,
-----------
| 1 || 3 |
-----------
| 2 |
-----------
For the same n, with 6 items,
-----------------
| 1 || 3 || 5 |
-----------------
| 2 || 4 || 6 |
-----------------
And so on..
I have tried tinkering it with float: left with no lucks. And now I am kinda learning flex layout, which leads me to stuck.
Please help :) Here's my Fiddle
Note: All my items will have the same width and height.

Answer 1

Something like this?
jsFiddle 1
.items {
display: flex;
flex-direction: column;
flex-wrap: wrap;
}
/* Below this is just styling */
.items {
background-color: #0f9c8a;
padding: 4px;
height: 250px;
width: 100%;
}
.item {
width: 100px;
height: 100px;
background-color: #6f6ac2;
border: 1px solid #fff;
margin: 2px;
text-align: center;
line-height: 100px;
}
<div class="items">
<div class="item">
Item 1
</div>
<div class="item">
Item 2
</div>
<div class="item">
Item 3
</div>
<div class="item">
Item 4
</div>
<div class="item">
Item 5
</div>
</div>
Update: since you need to align the .item divs to the left just add align-content:flex-start; to the container .items, like this:
jsFiddle 2
.items {
display: flex;
flex-direction: column;
flex-wrap: wrap;
align-content: flex-start;
}
/* Below this is just styling */
.items {
background-color: #0f9c8a;
padding: 4px;
height: 250px;
width: 1000px;
}
.item {
width: 100px;
height: 100px;
background-color: #6f6ac2;
border: 1px solid #fff;
margin: 2px;
text-align: center;
line-height: 100px;
}
<div class="items">
<div class="item">
Item 1
</div>
<div class="item">
Item 2
</div>
<div class="item">
Item 3
</div>
<div class="item">
Item 4
</div>
<div class="item">
Item 5
</div>
</div>