Vertical layout css - html

Question

I would like to create a vertical layout with flexbox.
Here is the structure :
.container {
display: flex;
flex-direction: column;
}
<div class="container">
<div class="child">1</div>
<div class="child">2</div>
<div class="child">3</div>
<div class="child">4</div>
<div class="child">5</div>
<div class="child">6</div>
<div class="child">7</div>
<div class="child">8</div>
</div>
And it should display 6 items per column
1 7
2 8
3
4
5
6

Answer 1

For the structure to break into a new column, it needs to know the limit to which it can fit its contents.
To make it clear, think of a simple paragraph tag with some text. Once the text exceeds the width of the page (or the container), the excess text wraps to the next line. So, in case of rows, width can be set as the limit, which is by default 100% of the viewport width or 100% of the container's width.
But here as we are dealing with columns and it takes height as the limit, the challenge here arises as the height is limitless in a HTML document. Because the height of a page increases to any extend when the content increases along with the vertical scroll bar. (Note that the same can be made possible in case of width with overflow a horizontal scroll bar, but here we are talking about the default behaviour).
Therefore, in this situation, to break the contents into a new column is only possible (exception with CSS grid) if we specify a height to the container.
It can either be specified in pixels or rem as mentioned in other answers.
Or if you are looking for a behaviour equivalent to the rows' as mentioned above, you can resort to viewport-height similar to viewport-width in case of rows. PEN
body {
margin: 0;
}
.container {
display: flex;
flex-direction: column;
flex-wrap: wrap;
height: 100vh;
}
.child {
height: 16.667vh;
}
Please note that this is not a perfect solution as it could cause misalignment when the content exceeds the height and also have browser compatibility issues. Also you may consider CSS grid or try Javascript solutions to perfectly tackle this scenario.
Hope this helps.

Answer 2

Try this style:
.container {
display: flex;
flex-direction: column;
height: 112px;
flex-wrap: wrap;
}
What I did here is set height to the container div so that the flex items wrap to the next column when it overflows. For this you need to set flex-wrap: wrap; too. In this case, height: 112px caused the overflow. You can change it as per your requirements.

Answer 3

The height is dynamic, base on the number of items you want to control vertically (in this case 6), I have calculated the height base on a 1rem font-size:
Example for 6 items:
.container {
display: flex;
flex-flow: column wrap;
font-size: 1rem;
max-height: calc(6 * 1.2em);
}
<div class="container">
<div class="child">1</div>
<div class="child">2</div>
<div class="child">3</div>
<div class="child">4</div>
<div class="child">5</div>
<div class="child">6</div>
<div class="child">7</div>
<div class="child">8</div>
</div>
Example for 7 items:
.container {
display: flex;
flex-flow: column wrap;
font-size: 1rem;
max-height: calc(7 * 1.2em);
}
<div class="container">
<div class="child">1</div>
<div class="child">2</div>
<div class="child">3</div>
<div class="child">4</div>
<div class="child">5</div>
<div class="child">6</div>
<div class="child">7</div>
<div class="child">8</div>
</div>

Answer 4

As the OP agreed to accept a CSS Grid solution, here is one:
.container {
display: grid;
}
.child:nth-child(6n + 2) {
grid-row-start: 2;
}
.child:nth-child(6n + 3) {
grid-row-start: 3;
}
.child:nth-child(6n + 4) {
grid-row-start: 4;
}
.child:nth-child(6n + 5) {
grid-row-start: 5;
}
.child:nth-child(6n) {
grid-row-start: 6;
}
PEN - Hope this helps.