CSS place N divs inline-block column by column (vertically)

Question

The code below shows what I have but it is not user friendly way to show data(time). "display:inline-block" puts elements in a row and after it reaches parent div's width it puts his next child in the next row.

     .rateDates {
         display: inline-block;
         margin: 10px;
         font-family: consolas;
         border: 1px solid #73d5e6;
         border-radius: 15px;
         padding: 4px 8px 4px 8px;
     }
     #ratesContainer {
         border: 1px solid #73d5e6;
         padding: 15px;
         border-radius: 10px;
         margin-top: 20px;
         margin-bottom: 20px;
         height:200px;
     }

<div id="ratesContainer">
  <div class="rateDates">
   <span>00:00:00</span>
  </div>
  <div class="rateDates">
   <span>11:11:11</span>
  </div>
  <div class="rateDates">
   <span>22:22:22</span>
  </div>
  <div class="rateDates">
   <span>33:33:33</span>
  </div>
  <div class="rateDates">
   <span>44:44:44</span>
  </div>
  <div class="rateDates">
   <span>55:55:55</span>
  </div>
</div>

The problem is I can't make it place child div's on top of each other and after the parent div's height is not enaugh start from top again. In other words start a new column.

I want to place rateDates class divs in column way. So they first fill up not the row but the column.

Page renders automatycally. I need a CSS solution. If it is posible.

Thank you.

Answer 1

You can do it the Flexbox:

#ratesContainer {
  display: flex; /* displays flex-items (children) inline */
  border: 1px solid #73d5e6;
  padding: 15px;
  border-radius: 10px;
  margin: 20px 0;
}

#ratesContainer > .rateDates {
  flex: 1;
  text-align: center;
  margin: 10px;
  font-family: consolas;
  border: 1px solid #73d5e6;
  border-radius: 15px;
  padding: 4px 8px;
}

@media (max-width: 768px) { /* adjust */
  #ratesContainer {
    flex-direction: column; /* stacks children vertically */
    align-items: center; /* because of the changed direction this is now horizontal centering, otherwise it's vertical by default */
  }
}

<div id="ratesContainer">
  <div class="rateDates">
   <span>00:00:00</span>
  </div>
  <div class="rateDates">
   <span>11:11:11</span>
  </div>
  <div class="rateDates">
   <span>22:22:22</span>
  </div>
  <div class="rateDates">
   <span>33:33:33</span>
  </div>
  <div class="rateDates">
   <span>44:44:44</span>
  </div>
  <div class="rateDates">
   <span>55:55:55</span>
  </div>
</div>

It's a bit different approach but the end result is what you want, i.e. display them in one column vertically.

Answer 2

Just to mention an alternative approach, this can be also done with multi-column layout:

     .rateDates {
         display: inline-block;
         margin: 10px;
         font-family: consolas;
         border: 1px solid #73d5e6;
         border-radius: 15px;
         padding: 4px 8px 4px 8px;
     }
     #ratesContainer {
         border: 1px solid #73d5e6;
         padding: 15px;
         border-radius: 10px;
         margin-top: 20px;
         margin-bottom: 20px;
         height:200px;
         column-width: 110px;
         column-fill: auto;
     }

<div id="ratesContainer">
  <div class="rateDates">
   <span>00:00:00</span>
  </div>
  <div class="rateDates">
   <span>11:11:11</span>
  </div>
  <div class="rateDates">
   <span>22:22:22</span>
  </div>
  <div class="rateDates">
   <span>33:33:33</span>
  </div>
  <div class="rateDates">
   <span>44:44:44</span>
  </div>
  <div class="rateDates">
   <span>55:55:55</span>
  </div>
</div>

But I prefer the Flexbox solution. These items don't look like parts of the text flow, that inline-block was designed for. And with Flexbox you will not need to hardcode the width of the column.

Answer 3

use a flex property.

Here is updated code.

CSS

.rateDates {
         margin: 10px;
         font-family: consolas;
         border: 1px solid #73d5e6;
         border-radius: 15px;
         padding: 4px 8px 4px 8px;
     }
     #ratesContainer {
         border: 1px solid #73d5e6;
         padding: 15px;
         border-radius: 10px;
         margin-top: 20px;
         margin-bottom: 20px;
         height:200px;
         display:flex;
         flex-direction:column;
         flex-wrap:wrap
     }

HTML

<div id="ratesContainer">
  <div class="rateDates">
   <span>00:00:00</span>
  </div>
  <div class="rateDates">
   <span>11:11:11</span>
  </div>
  <div class="rateDates">
   <span>22:22:22</span>
  </div>
  <div class="rateDates">
   <span>33:33:33</span>
  </div>
  <div class="rateDates">
   <span>44:44:44</span>
  </div>
  <div class="rateDates">
   <span>55:55:55</span>
  </div>
</div>