css网格动态多列2维布局

Question

In my HTML I have 1 container div then a dynamic number of child divs. I need to give them a multi-column layout based on the class name of child div.

<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>

Based on the class name of the child div they should be in their column. ie all the child div with style s should be in one column and all the child divs with class name m should be in next column in a 2-dimensional grid and so forth for rest of the child divs. This is dynamic html coming at run time, I can not modify this html.

I need styles as below

.list-units {}
.list-units .s {}
.list-units .m {}
.list-units .a {}
.list-units .r {}
.list-units .d {}

Answer 1

CSS-Grid and grid-auto-flow:column can do that.

 .list-units { display: grid; margin: 1em; grid-auto-flow: column; gap: 1em; text-align: center; } .list-units div { border: 1px solid grey; } .list-units .s { grid-column: 1; } .list-units .m { grid-column: 2 } .list-units .a { grid-column: 3; } .list-units .r { grid-column: 4; } .list-units .d { grid-column: 5; } .list-units .o { grid-column: 6; } .list-units .x { grid-column: 7 }

 <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>

Answer 2

Use Grid Column Property https://www.w3schools.com/cssref/tryit.asp?filename=trycss_grid-column

 .list-units {
    display: grid;
 }
 .list-units .s {
    grid-column: 1;
 }

 .list-units .m {
    grid-column: 2;
 }

Answer 3

 .list-units { display: grid; margin: 10px auto; background: #ffffff; grid-template-columns: auto auto auto auto; grid-auto-flow: row dense; margin-bottom: 20px; border: 1px solid grey; } .item { height: 60px; background: pink; display: flex; justify-content: center; align-items: center; color: whitesmoke; border: 1px solid red; } .list-units .s { grid-column-start: 1; } .list-units .m { grid-column-start: 2; } .list-units .a { grid-column-start: 3; } .list-units .r { grid-column-start: 4; } .list-units .d { grid-column-start: 5; } .list-units .o { grid-column-start: 6; } .list-units .x { grid-column-start: 7; }

 <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>