vertical wrap just like it works horizontally

Question

I have a div container (the light green one) with smaller divs inside (the blue ones) which I want to align as shown in the image.

Just like the default horizontal wrap works, but "rotated 90 degrees".

I was playing around with CSS columns with no success. I only want to define a fixed width for the columns and don't want to set a specified number of them. It should be dynamic and depend on the height of the container. I guess this code is pretty near:

div.container {
    column-width: some length;
    column-fill: auto;
}

and all I have to do is defining the column-count property in some way but I don't know how.

Or are there maybe better ways to do this than CSS columns?

Answer 1

• We want our divs to be laid out in a column so we use flex-direction: column;.
• We don't want one single large column but allow wrapping so we use flex-wrap: wrap;.
• To group all our columns to the left we use align-content: flex-start;.
• We must avoid our div to grow unlimited, like height by default does, so we need to restrict the height somehow. The height is the space that remains in the container below the other div ⇒ height: calc(100% - 10em);.

Everything together in this fiddle.

Answer 2

Your best bet would be to use flexbox on your container if you have a fixed height for it. So the code would look something like this

div.container{
   display: flex;
   flex-direction: column;
   flex-wrap: wrap;
   height: 500px; //Whatever height you want
}

@CBrow has posted a great link above, that's like a cheat sheet for flex box, read more on it and see what you can use