Within my HTML structure, there exists a single container div followed by a variable number of child divs. The objective is to implement a multi-column layout for these child divs based on their respective class names.
<div class="list-units">
<div class="s">s</div>
<div class="s">s</div>
<div class="s">s</div>
<div class="m">m</div>
<div class="m">m</div>
<div class="m">m</div>
<div class="a">a</div>
<div class="a">a</div>
<div class="r">r</div>
<div class="d">d</div>
<div class="o">o</div>
<div class="o">o</div>
<div class="x">x</div>
</div>
The requirement is to arrange the child divs into columns based on their class name. For instance, all divs with the class s should occupy one column, while those with the class m should populate the next column in a 2-dimensional grid. This arrangement applies to all other class names as well. It's important to note that this HTML content is generated dynamically at runtime and cannot be modified.
The necessary styles are outlined below:
.list-units {}
.list-units .s {}
.list-units .m {}
.list-units .a {}
.list-units .r {}
.list-units .d {}