2

How to align elements vertically and then spill over to the next column (say after 20 rows )and align vertically the remaining element. The number of columns to display should depend on the width of the screen. As the width of the browser decreases, the number of columns should decrease and the row heights should increase.

The HTML given below aligns the elements horizontally next to each other and then spills over to the next line. I want to do the other way, where it should add the element vertically in column one and after adding some n number of elements, it should move to the next column and fill the rows and move on to the next one.

The current HTML code.

<!DOCTYPE html>
<html>

<head>
    <title>
        Title
    </title>
    </head>

<style>
.column {

    float: left;

}
</style>
<body >
<div style=" overflow: hidden; width: 80%;">

                      <div class="column" style="margin-top: 1em; ">
                               <div style="width: 15em;  padding-right: 0.5em;">Box 0
                               </div>
                           </div>
                           <div class="column" style="margin-top: 1em; ">
                               <div style="width: 15em;  padding-right: 0.5em;">Box 1
                               </div>
                           </div>
                           <div class="column" style="margin-top: 1em; ">
                               <div style="width: 15em;  padding-right: 0.5em;">Box 2
                               </div>
                           </div>
                           <div class="column" style="margin-top: 1em; ">
                               <div style="width: 15em;  padding-right: 0.5em;">Box 3
                               </div>
                           </div>
                           <div class="column" style="margin-top: 1em; ">
                               <div style="width: 15em;  padding-right: 0.5em;">Box 4
                               </div>
                           </div>
                           <div class="column" style="margin-top: 1em; ">
                               <div style="width: 15em;  padding-right: 0.5em;">Box 5
                               </div>
                           </div>
                           <div class="column" style="margin-top: 1em; ">
                               <div style="width: 15em;  padding-right: 0.5em;">Box 6
                               </div>
                           </div>
                           <div class="column" style="margin-top: 1em; ">
                               <div style="width: 15em;  padding-right: 0.5em;">Box 7
                               </div>
                           </div>
                           <div class="column" style="margin-top: 1em; ">
                               <div style="width: 15em;  padding-right: 0.5em;">Box 8
                               </div>
                           </div>
                           <div class="column" style="margin-top: 1em; ">
                               <div style="width: 15em;  padding-right: 0.5em;">Box 9
                               </div>
                           </div>
                           <div class="column" style="margin-top: 1em; ">
                               <div style="width: 15em;  padding-right: 0.5em;">Box 10
                               </div>
                           </div>
                           <div class="column" style="margin-top: 1em; ">
                               <div style="width: 15em;  padding-right: 0.5em;">Box 11
                               </div>
                           </div>
                           <div class="column" style="margin-top: 1em; ">
                               <div style="width: 15em;  padding-right: 0.5em;">Box 12
                               </div>
                           </div>
                           <div class="column" style="margin-top: 1em; ">
                               <div style="width: 15em;  padding-right: 0.5em;">Box 13
                               </div>
                           </div>
                           <div class="column" style="margin-top: 1em; ">
                               <div style="width: 15em;  padding-right: 0.5em;">Box 14
                               </div>
                           </div>
                           <div class="column" style="margin-top: 1em; ">
                               <div style="width: 15em;  padding-right: 0.5em;">Box 15
                               </div>
                           </div>
                           <div class="column" style="margin-top: 1em; ">
                               <div style="width: 15em;  padding-right: 0.5em;">Box 16
                               </div>
                           </div>
                           <div class="column" style="margin-top: 1em; ">
                               <div style="width: 15em;  padding-right: 0.5em;">Box 17
                               </div>
                           </div>
                           <div class="column" style="margin-top: 1em; ">
                               <div style="width: 15em;  padding-right: 0.5em;">Box 18
                               </div>
                           </div>
                           <div class="column" style="margin-top: 1em; ">
                               <div style="width: 15em;  padding-right: 0.5em;">Box 19
                               </div>
                           </div>
                           <div class="column" style="margin-top: 1em; ">
                               <div style="width: 15em;  padding-right: 0.5em;">Box 20
                               </div>
                           </div>
                           <div class="column" style="margin-top: 1em; ">
                               <div style="width: 15em;  padding-right: 0.5em;">Box 21
                               </div>
                           </div>
                           <div class="column" style="margin-top: 1em; ">
                               <div style="width: 15em;  padding-right: 0.5em;">Box 22
                               </div>
                           </div>
                           <div class="column" style="margin-top: 1em; ">
                               <div style="width: 15em;  padding-right: 0.5em;">Box 23
                               </div>
                           </div>
                           <div class="column" style="margin-top: 1em; ">
                               <div style="width: 15em;  padding-right: 0.5em;">Box 24
                               </div>
                           </div>
                           <div class="column" style="margin-top: 1em; ">
                               <div style="width: 15em;  padding-right: 0.5em;">Box 25
                               </div>
                           </div>
                           <div class="column" style="margin-top: 1em; ">
                               <div style="width: 15em;  padding-right: 0.5em;">Box 26
                               </div>
                           </div>
                           <div class="column" style="margin-top: 1em; ">
                               <div style="width: 15em;  padding-right: 0.5em;">Box 27
                               </div>
                           </div>
                           <div class="column" style="margin-top: 1em; ">
                               <div style="width: 15em;  padding-right: 0.5em;">Box 28
                               </div>
                           </div>
                           <div class="column" style="margin-top: 1em; ">
                               <div style="width: 15em;  padding-right: 0.5em;">Box 29
                               </div>
                           </div>
                           <div class="column" style="margin-top: 1em; ">
                               <div style="width: 15em;  padding-right: 0.5em;">Box 30
                               </div>
                           </div>
                           <div class="column" style="margin-top: 1em; ">
                               <div style="width: 15em;  padding-right: 0.5em;">Box 31
                               </div>
                           </div>
                           <div class="column" style="margin-top: 1em; ">
                               <div style="width: 15em;  padding-right: 0.5em;">Box 32
                               </div>
                           </div>
                           <div class="column" style="margin-top: 1em; ">
                               <div style="width: 15em;  padding-right: 0.5em;">Box 33
                               </div>
                           </div>
                           <div class="column" style="margin-top: 1em; ">
                               <div style="width: 15em;  padding-right: 0.5em;">Box 34
                               </div>
                           </div>
                           <div class="column" style="margin-top: 1em; ">
                               <div style="width: 15em;  padding-right: 0.5em;">Box 35
                               </div>
                           </div>
                           <div class="column" style="margin-top: 1em; ">
                               <div style="width: 15em;  padding-right: 0.5em;">Box 36
                               </div>
                           </div>
                           <div class="column" style="margin-top: 1em; ">
                               <div style="width: 15em;  padding-right: 0.5em;">Box 37
                               </div>
                           </div>
                           <div class="column" style="margin-top: 1em; ">
                               <div style="width: 15em;  padding-right: 0.5em;">Box 38
                               </div>
                           </div>
                           <div class="column" style="margin-top: 1em; ">
                               <div style="width: 15em;  padding-right: 0.5em;">Box 39
                               </div>
                           </div>
                           <div class="column" style="margin-top: 1em; ">
                               <div style="width: 15em;  padding-right: 0.5em;">Box 40
                               </div>
                           </div>
                           <div class="column" style="margin-top: 1em; ">
                               <div style="width: 15em;  padding-right: 0.5em;">Box 41
                               </div>
                           </div>
                           <div class="column" style="margin-top: 1em; ">
                               <div style="width: 15em;  padding-right: 0.5em;">Box 42
                               </div>
                           </div>
                           <div class="column" style="margin-top: 1em; ">
                               <div style="width: 15em;  padding-right: 0.5em;">Box 43
                               </div>
                           </div>
                           <div class="column" style="margin-top: 1em; ">
                               <div style="width: 15em;  padding-right: 0.5em;">Box 44
                               </div>
                           </div>
                           <div class="column" style="margin-top: 1em; ">
                               <div style="width: 15em;  padding-right: 0.5em;">Box 45
                               </div>
                           </div>
                           <div class="column" style="margin-top: 1em; ">
                               <div style="width: 15em;  padding-right: 0.5em;">Box 46
                               </div>
                           </div>
                           <div class="column" style="margin-top: 1em; ">
                               <div style="width: 15em;  padding-right: 0.5em;">Box 47
                               </div>
                           </div>
                           <div class="column" style="margin-top: 1em; ">
                               <div style="width: 15em;  padding-right: 0.5em;">Box 48
                               </div>
                           </div>
                           <div class="column" style="margin-top: 1em; ">
                               <div style="width: 15em;  padding-right: 0.5em;">Box 49
                               </div>
                           </div>
                           <div class="column" style="margin-top: 1em; ">
                               <div style="width: 15em;  padding-right: 0.5em;">Box 50
                               </div>
                           </div>
                           <div class="column" style="margin-top: 1em; ">
                               <div style="width: 15em;  padding-right: 0.5em;">Box 51
                               </div>
                           </div>
                           <div class="column" style="margin-top: 1em; ">
                               <div style="width: 15em;  padding-right: 0.5em;">Box 52
                               </div>
                           </div>
                           <div class="column" style="margin-top: 1em; ">
                               <div style="width: 15em;  padding-right: 0.5em;">Box 53
                               </div>
                           </div>
                           <div class="column" style="margin-top: 1em; ">
                               <div style="width: 15em;  padding-right: 0.5em;">Box 54
                               </div>
                           </div>
                           <div class="column" style="margin-top: 1em; ">
                               <div style="width: 15em;  padding-right: 0.5em;">Box 55
                               </div>
                           </div>
                           <div class="column" style="margin-top: 1em; ">
                               <div style="width: 15em;  padding-right: 0.5em;">Box 56
                               </div>
                           </div>
                           <div class="column" style="margin-top: 1em; ">
                               <div style="width: 15em;  padding-right: 0.5em;">Box 57
                               </div>
                           </div>
                           <div class="column" style="margin-top: 1em; ">
                               <div style="width: 15em;  padding-right: 0.5em;">Box 58
                               </div>
                           </div>
                           <div class="column" style="margin-top: 1em; ">
                               <div style="width: 15em;  padding-right: 0.5em;">Box 59
                               </div>
                           </div>
                           <div class="column" style="margin-top: 1em; ">
                               <div style="width: 15em;  padding-right: 0.5em;">Box 60
                              </div>
                           </div>
                           <div class="column" style="margin-top: 1em; ">
                               <div style="width: 15em;  padding-right: 0.5em;">Box 61
                               </div>
                           </div>
                           <div class="column" style="margin-top: 1em; ">
                               <div style="width: 15em;  padding-right: 0.5em;">Box 62
                               </div>
                           </div>
                           <div class="column" style="margin-top: 1em; ">
                               <div style="width: 15em;  padding-right: 0.5em;">Box 63
                               </div>
                           </div>
                           <div class="column" style="margin-top: 1em; ">
                               <div style="width: 15em;  padding-right: 0.5em;">Box 64
                               </div>
                           </div>
                           <div class="column" style="margin-top: 1em; ">
                               <div style="width: 15em;  padding-right: 0.5em;">Box 65
                               </div>
                           </div>
                           <div class="column" style="margin-top: 1em; ">
                               <div style="width: 15em;  padding-right: 0.5em;">Box 66
                               </div>
                           </div>
                           <div class="column" style="margin-top: 1em; ">
                               <div style="width: 15em;  padding-right: 0.5em;">Box 67
                               </div>
                           </div>
                           <div class="column" style="margin-top: 1em; ">
                               <div style="width: 15em;  padding-right: 0.5em;">Box 68
                               </div>
                           </div>
                           <div class="column" style="margin-top: 1em; ">
                               <div style="width: 15em;  padding-right: 0.5em;">Box 69
                               </div>
                           </div>
                           <div class="column" style="margin-top: 1em; ">
                               <div style="width: 15em;  padding-right: 0.5em;">Box 70
                               </div>
                           </div>


                </body>

</html>

The current output and expected output are listed below. in the html code snippet, the number of columns dynamically varies based on the width of the browser. enter image description here

TylerH
  • 20,799
  • 66
  • 75
  • 101
dontnetnewbie
  • 159
  • 4
  • 15
  • 1
    Also if you use grids here's another https://stackoverflow.com/questions/44092529/make-grid-container-fill-columns-not-rows – TylerH Dec 05 '19 at 21:28

5 Answers5

2

However I've cleaned up code, replaced repeated DIVs & CSS codes with just one line code to control padding between elements and spacing you can change the value just from one place.

.column-container {
  column-width: 15rem; /* width of each column */
  column-gap: 1rem; /* increase gap between each column */
  width: 80%;
}

.column-container .column {
  margin-bottom: 1rem;
}
  <div class="column-container">
    <div class="column">Box </div>
    <div class="column">Box 1</div>
    <div class="column">Box 2</div>
    <div class="column">Box 3</div>
    <div class="column">Box 4</div>
    <div class="column">Box 5</div>
    <div class="column">Box 6</div>
    <div class="column">Box 7</div>
    <div class="column">Box 8</div>
    <div class="column">Box 9</div>
    <div class="column">Box 10</div>
    <div class="column">Box 12</div>
    <div class="column">Box 13</div>
    <div class="column">Box 14</div>
    <div class="column">Box 15</div>
    <div class="column">Box 16</div>
    <div class="column">Box 17</div>
    <div class="column">Box 18</div>
    <div class="column">Box 19</div>
    <div class="column">Box 20</div>
    <div class="column">Box 21</div>
    <div class="column">Box 22</div>
    <div class="column">Box 23</div>
    <div class="column">Box 24</div>
    <div class="column">Box 25</div>
    <div class="column">Box 26</div>
    <div class="column">Box 27</div>
    <div class="column">Box 28</div>
    <div class="column">Box 29</div>
    <div class="column">Box 30</div>
    <div class="column">Box 31</div>
    <div class="column">Box 32</div>
    <div class="column">Box 33</div>
    <div class="column">Box 34</div>
    <div class="column">Box 35</div>
    <div class="column">Box 36</div>
    <div class="column">Box 37</div>
    <div class="column">Box 38</div>
    <div class="column">Box 39</div>
    <div class="column">Box 40</div>
    <div class="column">Box 41</div>
    <div class="column">Box 42</div>
    <div class="column">Box 43</div>
    <div class="column">Box 44</div>
    <div class="column">Box 45</div>
    <div class="column">Box 46</div>
    <div class="column">Box 47</div>
    <div class="column">Box 48</div>
    <div class="column">Box 49</div>
    <div class="column">Box 50</div>
    <div class="column">Box 51</div>
    <div class="column">Box 52</div>
    <div class="column">Box 53</div>
    <div class="column">Box 54</div>
    <div class="column">Box 55</div>
    <div class="column">Box 56</div>
    <div class="column">Box 57</div>
    <div class="column">Box 58</div>
    <div class="column">Box 59</div>
    <div class="column">Box 60</div>
    <div class="column">Box 61</div>
    <div class="column">Box 62</div>
    <div class="column">Box 63</div>
    <div class="column">Box 64</div>
    <div class="column">Box 65</div>
    <div class="column">Box 66</div>
    <div class="column">Box 67</div>
    <div class="column">Box 68</div>
    <div class="column">Box 69</div>
    <div class="column">Box 70</div>
  </div>
TylerH
  • 20,799
  • 66
  • 75
  • 101
Usman Arshad
  • 868
  • 8
  • 19
  • @G-Cyr Yes it does: https://developer.mozilla.org/en-US/docs/Web/CSS/column-gap – TylerH Dec 05 '19 at 21:28
  • @TylerH The column-gap is the only way I know which add space between columns, what is the other way? https://developer.mozilla.org/en-US/docs/Web/CSS/column-gap – Usman Arshad Dec 05 '19 at 21:49
  • 1
    You may have missed some of the conversation as the comments are deleted now. My comments were all in reply to G-Cyr, who said `column-gap` did not exist. – TylerH Dec 05 '19 at 22:00
  • 1
    @TylerH oh alright, well if someone know a better way to add space between column without using a column-gap, most welcome, I would like to learn new ways. – Usman Arshad Dec 05 '19 at 22:12
  • @G-Cyr What is the alternative way of column-gap? please share, it can be helpful for community not only for OP :) – Usman Arshad Dec 06 '19 at 00:20
  • 1
    thank you and it worked. – dontnetnewbie Dec 09 '19 at 23:06
  • @UsmanArshad, this is great, exactly what I needed as well. Great work! – Arknev May 25 '22 at 16:01
1

dontnetnewbie asked for

The number of columns to display should depend on the width of the screen. As the width of the browser decreases, the number of columns should decrease and the row heights should increase.

what you look for is https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Columns

and you can use https://developer.mozilla.org/en-US/docs/Web/CSS/column-width so the numbers of column will adapt according to the width of the parent and to the width set for the columns. No need of mediaquerie when Multi Column CSS is set from column-width.

body>div {
  column-width: 15em;
  margin: auto;
}
<h1 style="text-align:center"> run me in fullpage and resize window's width </h1>
<div style=" overflow: hidden; width: 80%;">
  <div class="column" style="margin-top: 1em; ">
    <div style="width: 15em;  padding-right: 0.5em;">Box 0
    </div>
  </div>
  <div class="column" style="margin-top: 1em; ">
    <div style="width: 15em;  padding-right: 0.5em;">Box 1
    </div>
  </div>
  <div class="column" style="margin-top: 1em; ">
    <div style="width: 15em;  padding-right: 0.5em;">Box 2
    </div>
  </div>
  <div class="column" style="margin-top: 1em; ">
    <div style="width: 15em;  padding-right: 0.5em;">Box 3
    </div>
  </div>
  <div class="column" style="margin-top: 1em; ">
    <div style="width: 15em;  padding-right: 0.5em;">Box 4
    </div>
  </div>
  <div class="column" style="margin-top: 1em; ">
    <div style="width: 15em;  padding-right: 0.5em;">Box 5
    </div>
  </div>
  <div class="column" style="margin-top: 1em; ">
    <div style="width: 15em;  padding-right: 0.5em;">Box 6
    </div>
  </div>
  <div class="column" style="margin-top: 1em; ">
    <div style="width: 15em;  padding-right: 0.5em;">Box 7
    </div>
  </div>
  <div class="column" style="margin-top: 1em; ">
    <div style="width: 15em;  padding-right: 0.5em;">Box 8
    </div>
  </div>
  <div class="column" style="margin-top: 1em; ">
    <div style="width: 15em;  padding-right: 0.5em;">Box 9
    </div>
  </div>
  <div class="column" style="margin-top: 1em; ">
    <div style="width: 15em;  padding-right: 0.5em;">Box 10
    </div>
  </div>
  <div class="column" style="margin-top: 1em; ">
    <div style="width: 15em;  padding-right: 0.5em;">Box 11
    </div>
  </div>
  <div class="column" style="margin-top: 1em; ">
    <div style="width: 15em;  padding-right: 0.5em;">Box 12
    </div>
  </div>
  <div class="column" style="margin-top: 1em; ">
    <div style="width: 15em;  padding-right: 0.5em;">Box 13
    </div>
  </div>
  <div class="column" style="margin-top: 1em; ">
    <div style="width: 15em;  padding-right: 0.5em;">Box 14
    </div>
  </div>
  <div class="column" style="margin-top: 1em; ">
    <div style="width: 15em;  padding-right: 0.5em;">Box 15
    </div>
  </div>
  <div class="column" style="margin-top: 1em; ">
    <div style="width: 15em;  padding-right: 0.5em;">Box 16
    </div>
  </div>
  <div class="column" style="margin-top: 1em; ">
    <div style="width: 15em;  padding-right: 0.5em;">Box 17
    </div>
  </div>
  <div class="column" style="margin-top: 1em; ">
    <div style="width: 15em;  padding-right: 0.5em;">Box 18
    </div>
  </div>
  <div class="column" style="margin-top: 1em; ">
    <div style="width: 15em;  padding-right: 0.5em;">Box 19
    </div>
  </div>
  <div class="column" style="margin-top: 1em; ">
    <div style="width: 15em;  padding-right: 0.5em;">Box 20
    </div>
  </div>
  <div class="column" style="margin-top: 1em; ">
    <div style="width: 15em;  padding-right: 0.5em;">Box 21
    </div>
  </div>
  <div class="column" style="margin-top: 1em; ">
    <div style="width: 15em;  padding-right: 0.5em;">Box 22
    </div>
  </div>
  <div class="column" style="margin-top: 1em; ">
    <div style="width: 15em;  padding-right: 0.5em;">Box 23
    </div>
  </div>
  <div class="column" style="margin-top: 1em; ">
    <div style="width: 15em;  padding-right: 0.5em;">Box 24
    </div>
  </div>
  <div class="column" style="margin-top: 1em; ">
    <div style="width: 15em;  padding-right: 0.5em;">Box 25
    </div>
  </div>
  <div class="column" style="margin-top: 1em; ">
    <div style="width: 15em;  padding-right: 0.5em;">Box 26
    </div>
  </div>
  <div class="column" style="margin-top: 1em; ">
    <div style="width: 15em;  padding-right: 0.5em;">Box 27
    </div>
  </div>
  <div class="column" style="margin-top: 1em; ">
    <div style="width: 15em;  padding-right: 0.5em;">Box 28
    </div>
  </div>
  <div class="column" style="margin-top: 1em; ">
    <div style="width: 15em;  padding-right: 0.5em;">Box 29
    </div>
  </div>
  <div class="column" style="margin-top: 1em; ">
    <div style="width: 15em;  padding-right: 0.5em;">Box 30
    </div>
  </div>
  <div class="column" style="margin-top: 1em; ">
    <div style="width: 15em;  padding-right: 0.5em;">Box 31
    </div>
  </div>
  <div class="column" style="margin-top: 1em; ">
    <div style="width: 15em;  padding-right: 0.5em;">Box 32
    </div>
  </div>
  <div class="column" style="margin-top: 1em; ">
    <div style="width: 15em;  padding-right: 0.5em;">Box 33
    </div>
  </div>
  <div class="column" style="margin-top: 1em; ">
    <div style="width: 15em;  padding-right: 0.5em;">Box 34
    </div>
  </div>
  <div class="column" style="margin-top: 1em; ">
    <div style="width: 15em;  padding-right: 0.5em;">Box 35
    </div>
  </div>
  <div class="column" style="margin-top: 1em; ">
    <div style="width: 15em;  padding-right: 0.5em;">Box 36
    </div>
  </div>
  <div class="column" style="margin-top: 1em; ">
    <div style="width: 15em;  padding-right: 0.5em;">Box 37
    </div>
  </div>
  <div class="column" style="margin-top: 1em; ">
    <div style="width: 15em;  padding-right: 0.5em;">Box 38
    </div>
  </div>
  <div class="column" style="margin-top: 1em; ">
    <div style="width: 15em;  padding-right: 0.5em;">Box 39
    </div>
  </div>
  <div class="column" style="margin-top: 1em; ">
    <div style="width: 15em;  padding-right: 0.5em;">Box 40
    </div>
  </div>
  <div class="column" style="margin-top: 1em; ">
    <div style="width: 15em;  padding-right: 0.5em;">Box 41
    </div>
  </div>
  <div class="column" style="margin-top: 1em; ">
    <div style="width: 15em;  padding-right: 0.5em;">Box 42
    </div>
  </div>
  <div class="column" style="margin-top: 1em; ">
    <div style="width: 15em;  padding-right: 0.5em;">Box 43
    </div>
  </div>
  <div class="column" style="margin-top: 1em; ">
    <div style="width: 15em;  padding-right: 0.5em;">Box 44
    </div>
  </div>
  <div class="column" style="margin-top: 1em; ">
    <div style="width: 15em;  padding-right: 0.5em;">Box 45
    </div>
  </div>
  <div class="column" style="margin-top: 1em; ">
    <div style="width: 15em;  padding-right: 0.5em;">Box 46
    </div>
  </div>
  <div class="column" style="margin-top: 1em; ">
    <div style="width: 15em;  padding-right: 0.5em;">Box 47
    </div>
  </div>
  <div class="column" style="margin-top: 1em; ">
    <div style="width: 15em;  padding-right: 0.5em;">Box 48
    </div>
  </div>
  <div class="column" style="margin-top: 1em; ">
    <div style="width: 15em;  padding-right: 0.5em;">Box 49
    </div>
  </div>
  <div class="column" style="margin-top: 1em; ">
    <div style="width: 15em;  padding-right: 0.5em;">Box 50
    </div>
  </div>
  <div class="column" style="margin-top: 1em; ">
    <div style="width: 15em;  padding-right: 0.5em;">Box 51
    </div>
  </div>
  <div class="column" style="margin-top: 1em; ">
    <div style="width: 15em;  padding-right: 0.5em;">Box 52
    </div>
  </div>
  <div class="column" style="margin-top: 1em; ">
    <div style="width: 15em;  padding-right: 0.5em;">Box 53
    </div>
  </div>
  <div class="column" style="margin-top: 1em; ">
    <div style="width: 15em;  padding-right: 0.5em;">Box 54
    </div>
  </div>
  <div class="column" style="margin-top: 1em; ">
    <div style="width: 15em;  padding-right: 0.5em;">Box 55
    </div>
  </div>
  <div class="column" style="margin-top: 1em; ">
    <div style="width: 15em;  padding-right: 0.5em;">Box 56
    </div>
  </div>
  <div class="column" style="margin-top: 1em; ">
    <div style="width: 15em;  padding-right: 0.5em;">Box 57
    </div>
  </div>
  <div class="column" style="margin-top: 1em; ">
    <div style="width: 15em;  padding-right: 0.5em;">Box 58
    </div>
  </div>
  <div class="column" style="margin-top: 1em; ">
    <div style="width: 15em;  padding-right: 0.5em;">Box 59
    </div>
  </div>
  <div class="column" style="margin-top: 1em; ">
    <div style="width: 15em;  padding-right: 0.5em;">Box 60
    </div>
  </div>
  <div class="column" style="margin-top: 1em; ">
    <div style="width: 15em;  padding-right: 0.5em;">Box 61
    </div>
  </div>
  <div class="column" style="margin-top: 1em; ">
    <div style="width: 15em;  padding-right: 0.5em;">Box 62
    </div>
  </div>
  <div class="column" style="margin-top: 1em; ">
    <div style="width: 15em;  padding-right: 0.5em;">Box 63
    </div>
  </div>
  <div class="column" style="margin-top: 1em; ">
    <div style="width: 15em;  padding-right: 0.5em;">Box 64
    </div>
  </div>
  <div class="column" style="margin-top: 1em; ">
    <div style="width: 15em;  padding-right: 0.5em;">Box 65
    </div>
  </div>
  <div class="column" style="margin-top: 1em; ">
    <div style="width: 15em;  padding-right: 0.5em;">Box 66
    </div>
  </div>
  <div class="column" style="margin-top: 1em; ">
    <div style="width: 15em;  padding-right: 0.5em;">Box 67
    </div>
  </div>
  <div class="column" style="margin-top: 1em; ">
    <div style="width: 15em;  padding-right: 0.5em;">Box 68
    </div>
  </div>
  <div class="column" style="margin-top: 1em; ">
    <div style="width: 15em;  padding-right: 0.5em;">Box 69
    </div>
  </div>
  <div class="column" style="margin-top: 1em; ">
    <div style="width: 15em;  padding-right: 0.5em;">Box 70
    </div>
  </div>


  </body>

  </html>
G-Cyrillus
  • 101,410
  • 14
  • 105
  • 129
1

Use FLEX instead. Delete the css float:left and create a container class with css:

.container {
    height: 100vh;
    width: 50vw;
    /* margin: auto; */
    display: flex;
    flex-flow: wrap column;
    align-content: flex-start;
}

Be sure to adjust the percentage of width/height as you wish the width/height of the browser changes. In this example the width is 50% of the browser width and the height is the 100% of the browser height.

There is a excellent guide about flex here: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Here is the result code:

<!DOCTYPE html>
<html>

<head>
    <title>
        Title
    </title>
    </head>

<style>


    .container {
        height: 100vh;
        width: 50vw;
        /* margin: auto; */
        display: flex;
        flex-flow: wrap column;
        align-content: flex-start;
    }   

</style>
<body >
<div class="container">

                      <div class="column" style="margin-top: 1em; ">
                                              <div style="width: 15em;  padding-right: 0.5em;">Box 0
                                              </div>
                                          </div>
                                          <div class="column" style="margin-top: 1em; ">
                                              <div style="width: 15em;  padding-right: 0.5em;">Box 1
                                              </div>
                                          </div>
                                          <div class="column" style="margin-top: 1em; ">
                                              <div style="width: 15em;  padding-right: 0.5em;">Box 2
                                              </div>
                                          </div>
                                          <div class="column" style="margin-top: 1em; ">
                                              <div style="width: 15em;  padding-right: 0.5em;">Box 3
                                              </div>
                                          </div>
                                          <div class="column" style="margin-top: 1em; ">
                                              <div style="width: 15em;  padding-right: 0.5em;">Box 4
                                              </div>
                                          </div>
                                          <div class="column" style="margin-top: 1em; ">
                                              <div style="width: 15em;  padding-right: 0.5em;">Box 5
                                              </div>
                                          </div>
                                          <div class="column" style="margin-top: 1em; ">
                                              <div style="width: 15em;  padding-right: 0.5em;">Box 6
                                              </div>
                                          </div>
                                          <div class="column" style="margin-top: 1em; ">
                                              <div style="width: 15em;  padding-right: 0.5em;">Box 7
                                              </div>
                                          </div>
                                          <div class="column" style="margin-top: 1em; ">
                                              <div style="width: 15em;  padding-right: 0.5em;">Box 8
                                              </div>
                                          </div>
                                          <div class="column" style="margin-top: 1em; ">
                                              <div style="width: 15em;  padding-right: 0.5em;">Box 9
                                              </div>
                                          </div>
                                          <div class="column" style="margin-top: 1em; ">
                                              <div style="width: 15em;  padding-right: 0.5em;">Box 10
                                              </div>
                                          </div>
                                          <div class="column" style="margin-top: 1em; ">
                                              <div style="width: 15em;  padding-right: 0.5em;">Box 11
                                              </div>
                                          </div>
                                          <div class="column" style="margin-top: 1em; ">
                                              <div style="width: 15em;  padding-right: 0.5em;">Box 12
                                              </div>
                                          </div>
                                          <div class="column" style="margin-top: 1em; ">
                                              <div style="width: 15em;  padding-right: 0.5em;">Box 13
                                              </div>
                                          </div>
                                          <div class="column" style="margin-top: 1em; ">
                                              <div style="width: 15em;  padding-right: 0.5em;">Box 14
                                              </div>
                                          </div>
                                          <div class="column" style="margin-top: 1em; ">
                                              <div style="width: 15em;  padding-right: 0.5em;">Box 15
                                              </div>
                                          </div>
                                          <div class="column" style="margin-top: 1em; ">
                                              <div style="width: 15em;  padding-right: 0.5em;">Box 16
                                              </div>
                                          </div>
                                          <div class="column" style="margin-top: 1em; ">
                                              <div style="width: 15em;  padding-right: 0.5em;">Box 17
                                              </div>
                                          </div>
                                          <div class="column" style="margin-top: 1em; ">
                                              <div style="width: 15em;  padding-right: 0.5em;">Box 18
                                              </div>
                                          </div>
                                          <div class="column" style="margin-top: 1em; ">
                                              <div style="width: 15em;  padding-right: 0.5em;">Box 19
                                              </div>
                                          </div>
                                          <div class="column" style="margin-top: 1em; ">
                                              <div style="width: 15em;  padding-right: 0.5em;">Box 20
                                              </div>
                                          </div>
                                          <div class="column" style="margin-top: 1em; ">
                                              <div style="width: 15em;  padding-right: 0.5em;">Box 21
                                              </div>
                                          </div>
                                          <div class="column" style="margin-top: 1em; ">
                                              <div style="width: 15em;  padding-right: 0.5em;">Box 22
                                              </div>
                                          </div>
                                          <div class="column" style="margin-top: 1em; ">
                                              <div style="width: 15em;  padding-right: 0.5em;">Box 23
                                              </div>
                                          </div>
                                          <div class="column" style="margin-top: 1em; ">
                                              <div style="width: 15em;  padding-right: 0.5em;">Box 24
                                              </div>
                                          </div>
                                          <div class="column" style="margin-top: 1em; ">
                                              <div style="width: 15em;  padding-right: 0.5em;">Box 25
                                              </div>
                                          </div>
                                          <div class="column" style="margin-top: 1em; ">
                                              <div style="width: 15em;  padding-right: 0.5em;">Box 26
                                              </div>
                                          </div>
                                          <div class="column" style="margin-top: 1em; ">
                                              <div style="width: 15em;  padding-right: 0.5em;">Box 27
                                              </div>
                                          </div>
                                          <div class="column" style="margin-top: 1em; ">
                                              <div style="width: 15em;  padding-right: 0.5em;">Box 28
                                              </div>
                                          </div>
                                          <div class="column" style="margin-top: 1em; ">
                                              <div style="width: 15em;  padding-right: 0.5em;">Box 29
                                              </div>
                                          </div>
                                          <div class="column" style="margin-top: 1em; ">
                                              <div style="width: 15em;  padding-right: 0.5em;">Box 30
                                              </div>
                                          </div>
                                          <div class="column" style="margin-top: 1em; ">
                                              <div style="width: 15em;  padding-right: 0.5em;">Box 31
                                              </div>
                                          </div>
                                          <div class="column" style="margin-top: 1em; ">
                                              <div style="width: 15em;  padding-right: 0.5em;">Box 32
                                              </div>
                                          </div>
                                          <div class="column" style="margin-top: 1em; ">
                                              <div style="width: 15em;  padding-right: 0.5em;">Box 33
                                              </div>
                                          </div>
                                          <div class="column" style="margin-top: 1em; ">
                                              <div style="width: 15em;  padding-right: 0.5em;">Box 34
                                              </div>
                                          </div>
                                          <div class="column" style="margin-top: 1em; ">
                                              <div style="width: 15em;  padding-right: 0.5em;">Box 35
                                              </div>
                                          </div>
                                          <div class="column" style="margin-top: 1em; ">
                                              <div style="width: 15em;  padding-right: 0.5em;">Box 36
                                              </div>
                                          </div>
                                          <div class="column" style="margin-top: 1em; ">
                                              <div style="width: 15em;  padding-right: 0.5em;">Box 37
                                              </div>
                                          </div>
                                          <div class="column" style="margin-top: 1em; ">
                                              <div style="width: 15em;  padding-right: 0.5em;">Box 38
                                              </div>
                                          </div>
                                          <div class="column" style="margin-top: 1em; ">
                                              <div style="width: 15em;  padding-right: 0.5em;">Box 39
                                              </div>
                                          </div>
                                          <div class="column" style="margin-top: 1em; ">
                                              <div style="width: 15em;  padding-right: 0.5em;">Box 40
                                              </div>
                                          </div>
                                          <div class="column" style="margin-top: 1em; ">
                                              <div style="width: 15em;  padding-right: 0.5em;">Box 41
                                              </div>
                                          </div>
                                          <div class="column" style="margin-top: 1em; ">
                                              <div style="width: 15em;  padding-right: 0.5em;">Box 42
                                              </div>
                                          </div>
                                          <div class="column" style="margin-top: 1em; ">
                                              <div style="width: 15em;  padding-right: 0.5em;">Box 43
                                              </div>
                                          </div>
                                          <div class="column" style="margin-top: 1em; ">
                                              <div style="width: 15em;  padding-right: 0.5em;">Box 44
                                              </div>
                                          </div>
                                          <div class="column" style="margin-top: 1em; ">
                                              <div style="width: 15em;  padding-right: 0.5em;">Box 45
                                              </div>
                                          </div>
                                          <div class="column" style="margin-top: 1em; ">
                                              <div style="width: 15em;  padding-right: 0.5em;">Box 46
                                              </div>
                                          </div>
                                          <div class="column" style="margin-top: 1em; ">
                                              <div style="width: 15em;  padding-right: 0.5em;">Box 47
                                              </div>
                                          </div>
                                          <div class="column" style="margin-top: 1em; ">
                                              <div style="width: 15em;  padding-right: 0.5em;">Box 48
                                              </div>
                                          </div>
                                          <div class="column" style="margin-top: 1em; ">
                                              <div style="width: 15em;  padding-right: 0.5em;">Box 49
                                              </div>
                                          </div>
                                          <div class="column" style="margin-top: 1em; ">
                                              <div style="width: 15em;  padding-right: 0.5em;">Box 50
                                              </div>
                                          </div>
                                          <div class="column" style="margin-top: 1em; ">
                                              <div style="width: 15em;  padding-right: 0.5em;">Box 51
                                              </div>
                                          </div>
                                          <div class="column" style="margin-top: 1em; ">
                                              <div style="width: 15em;  padding-right: 0.5em;">Box 52
                                              </div>
                                          </div>
                                          <div class="column" style="margin-top: 1em; ">
                                              <div style="width: 15em;  padding-right: 0.5em;">Box 53
                                              </div>
                                          </div>
                                          <div class="column" style="margin-top: 1em; ">
                                              <div style="width: 15em;  padding-right: 0.5em;">Box 54
                                              </div>
                                          </div>
                                          <div class="column" style="margin-top: 1em; ">
                                              <div style="width: 15em;  padding-right: 0.5em;">Box 55
                                              </div>
                                          </div>
                                          <div class="column" style="margin-top: 1em; ">
                                              <div style="width: 15em;  padding-right: 0.5em;">Box 56
                                              </div>
                                          </div>
                                          <div class="column" style="margin-top: 1em; ">
                                              <div style="width: 15em;  padding-right: 0.5em;">Box 57
                                              </div>
                                          </div>
                                          <div class="column" style="margin-top: 1em; ">
                                              <div style="width: 15em;  padding-right: 0.5em;">Box 58
                                              </div>
                                          </div>
                                          <div class="column" style="margin-top: 1em; ">
                                              <div style="width: 15em;  padding-right: 0.5em;">Box 59
                                              </div>
                                          </div>
                                          <div class="column" style="margin-top: 1em; ">
                                              <div style="width: 15em;  padding-right: 0.5em;">Box 60
                                             </div>
                                          </div>
                                          <div class="column" style="margin-top: 1em; ">
                                              <div style="width: 15em;  padding-right: 0.5em;">Box 61
                                              </div>
                                          </div>
                                          <div class="column" style="margin-top: 1em; ">
                                              <div style="width: 15em;  padding-right: 0.5em;">Box 62
                                              </div>
                                          </div>
                                          <div class="column" style="margin-top: 1em; ">
                                              <div style="width: 15em;  padding-right: 0.5em;">Box 63
                                              </div>
                                          </div>
                                          <div class="column" style="margin-top: 1em; ">
                                              <div style="width: 15em;  padding-right: 0.5em;">Box 64
                                              </div>
                                          </div>
                                          <div class="column" style="margin-top: 1em; ">
                                              <div style="width: 15em;  padding-right: 0.5em;">Box 65
                                              </div>
                                          </div>
                                          <div class="column" style="margin-top: 1em; ">
                                              <div style="width: 15em;  padding-right: 0.5em;">Box 66
                                              </div>
                                          </div>
                                          <div class="column" style="margin-top: 1em; ">
                                              <div style="width: 15em;  padding-right: 0.5em;">Box 67
                                              </div>
                                          </div>
                                          <div class="column" style="margin-top: 1em; ">
                                              <div style="width: 15em;  padding-right: 0.5em;">Box 68
                                              </div>
                                          </div>
                                          <div class="column" style="margin-top: 1em; ">
                                              <div style="width: 15em;  padding-right: 0.5em;">Box 69
                                              </div>
                                          </div>
                                          <div class="column" style="margin-top: 1em; ">
                                              <div style="width: 15em;  padding-right: 0.5em;">Box 70
                                              </div>
                                          </div>


                </body>

</html>
Jacinto Tárraga Hernández
  • 92
  • 5
1

If you have defined number of rows (say 10 in the example), CSS-Grid can manage this also:

.grid {
  display: grid;
  grid-template-rows: repeat(10, 1fr);
  grid-auto-flow: column;
}
<div class="grid">
  <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 class="item">item 6</div>
  <div class="item">item 7</div>
  <div class="item">item 8</div>
  <div class="item">item 9</div>
  <div class="item">item 10</div>
  <div class="item">item 11</div>
  <div class="item">item 12</div>
  <div class="item">item 13</div>
  <div class="item">item 14</div>
  <div class="item">item 15</div>
  <div class="item">item 16</div>
  <div class="item">item 17</div>
  <div class="item">item 18</div>
  <div class="item">item 19</div>
  <div class="item">item 20</div>
  <div class="item">item 21</div>
  <div class="item">item 22</div>
  <div class="item">item 23</div>
  <div class="item">item 24</div>
  <div class="item">item 25</div>
  <div class="item">item 26</div>
  <div class="item">item 27</div>
  <div class="item">item 28</div>
  <div class="item">item 29</div>
  <div class="item">item 30</div>
  <div class="item">item 31</div>
  <div class="item">item 32</div>
</div>
Paulie_D
  • 107,962
  • 13
  • 142
  • 161
1

Try to use CSS columns:

ul {
  -webkit-columns: 3;
  -moz-columns: 3;
      columns: 3;
}
<ul>
  <li><span>Box 1</span></li>
  <li><span>Box 2</span></li>
  <li><span>Box 3</span></li>
  <li><span>Box 4</span></li>
  <li><span>Box 5</span></li>
  <li><span>Box 6</span></li>
  <li><span>Box 7</span></li>
  <li><span>Box 8</span></li>
  <li><span>Box 9</span></li>
  <li><span>Box 10</span></li>
</ul>
Sandro
  • 118
  • 10
  • if column CSS is to be used , it also needs to match the requirement of the op : *The number of columns to display should depend on the width of the screen. As the width of the browser decreases, the number of columns should decrease and the row heights should increase.* – G-Cyrillus Dec 05 '19 at 21:20