CODEWITHSUNDEEP
htmlcssflexbox
mbarish-me
mbarish-me

Reputation: 947

css grid dynamic multi column 2 dimentional layout

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

Upvotes: 2

Views: 140

Answers (3)

Manohar
Manohar

Reputation: 13

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

Upvotes: -1

Paulie_D
Paulie_D

Reputation: 114979

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>

Upvotes: 4

harshitpthk
harshitpthk

Reputation: 4136

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

Upvotes: 0

Related Questions