CODEWITHSUNDEEP
htmlcss
tom
tom

Reputation: 2357

vertical wrap just like it works horizontally

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.

enter image description here

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?

Upvotes: 4

Views: 1929

Answers (3)

woestijnrog
woestijnrog

Reputation: 1579

  • 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.

Upvotes: 1

tom
tom

Reputation: 2357

Thanks VeeK and CBroe, I tried flexbox, but I cannot get it to work how I want it. This is the closest I can get:

div.container {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: flex-start;
    width: 25em;
    height: 17.5em;
    background-color: #dfffbf;
}
div.item {
    display: inline-block;
    margin: 1em 0 0 1em;
    width: 2em;
    height: 2em;
    font-family: sans-serif;
    line-height: 2em;
    text-align: center;
    color: #ffffff;
    background-color: #729fcf;
}
<div class="container">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
    <div class="item">5</div>
    <div class="item">6</div>
    <div class="item">7</div>
    <div class="item">8</div>
    <div class="item">9</div>
    <div class="item">10</div>
    <div class="item">11</div>
    <div class="item">12</div>
    <div class="item">13</div>
</div>

The issues: 1. It shouldn't be justified horizontally. 2. It should work with a container that has dynamic height.

...So just like the normal horizontal flow that browsers normally do, just in a vertical manner.

Upvotes: 1

Whip
Whip

Reputation: 2224

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

Upvotes: 1

Related Questions