I have a long list with subitems which fall into the same category. As the submenu is growing, I want the submenu to break over in listing the sub menu items in 3 columns. Anybody out there knowing the trick how to do that?
see here illustrated my issue:
topmenu item
-submenu 1
-submenu 2
-submenu 3
-submenu 4
-submenu 5
-submenu 6
-submenu 7
-submenu 8
-submenu 9
-submenu 10
-submenu 11
-submenu 12
-submenu 13
-submenu 14
-submenu 15
-submenu 16
-submenu 17
-submenu 18
-submenu 19
-submenu 20
I need it to be like this:
topmenu item
-submenu 1 -submenu 6 -submenu 11
-submenu 2 -submenu 7 -submenu 12
-submenu 3 -submenu 8 -submenu 13
-submenu 4 -submenu 9 -submenu 14
-submenu 5 -submenu 10 -submenu 15
Thanks
You could use flexbox to do this
5 items demo | 10 items demo | 15 items demo
<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 class="item">14</div>
<div class="item">15</div>
</div>
.container{
max-height: 200px;
width: 100%;
display: flex;
flex-direction: column;
flex-wrap: wrap;
color: #fff;
justify-content: flex-start;
align-content: flex-start;
align-items: flex-start;
}
.item{
height: 20px;
background: maroon;
width: 200px;
margin: 3px;
padding: 5px;
}