To achieve the desired layout, you can utilize CSS columns.
Add column-count: 4; to the container of your items to set the number of columns.
If you want to prevent an item from breaking into a new column, include column-break-inside: avoid; in your item's styling. Otherwise, you can skip this part of the code if column breaks are acceptable.
This is a sample layout without using column-break-inside: avoid;:
Menu Header menu-item menu-item Menu Header
menu-item menu-item menu-item menu-item
menu-item menu-item menu-item
menu-item Menu Header menu-item menu-item
menu-item menu-item menu-item menu-item
ul {
margin: 0;
padding: 0;
list-style: none;
}
#content > .group {
margin: 0;
padding: 10px;
border: 1px solid #cfcfcf;
background-color: #ddd;
-webkit-column-count: 4; //Defines the number of columns you want
-moz-column-count: 4;
column-count: 4;
}
#content > .group .item:first-child {
margin-top: 0px;
}
#content > .group .item {
padding: 10px;
display: list-element;
-webkit-column-break-inside: avoid;
-moz-column-break-inside: avoid;
-o-column-break-inside: avoid;
-ms-column-break-inside: avoid;
column-break-inside: avoid;
}
<div id="content">
<ul class="group">
<li class="item"><strong>Item</strong>
<br/>Subitem
</li>
<li class="item"><strong>Item</strong>
</li>
<li class="item"><strong>Item</strong>
<ul>
<li>Subitem</li>
<li>Subitem</li>
<li>Subitem</li>
</ul>
</li>
<li class="item"><strong>Item</strong>
</li>
<li class="item"><strong>Item</strong>
</li>
<li class="item"><strong>Item</strong>
<ul>
<li>Subitem</li>
<li>Subitem</li>
<li>Subitem</li>
</ul>
<li class="item"><strong>Item</strong>
</li>
<li class="item"><strong>Item</strong>
</li>
<li class="item"><strong>Item</strong>
</li>
<li class="item"><strong>Item</strong>
</li>
<li class="item"><strong>Item</strong>
</li>
<li class="item"><strong>Item</strong>
</li>
<li class="item"><strong>Item</strong>
</li>
<li class="item"><strong>Item</strong>
</li>
</ul>
</div>