Question 191662 in Html Question posted in
Some basic documentation can be found here.

Html – How to allow dynamic column space to data in css grid

I want to create a 3 parent div : A B C, every parent have a grid system as a child, and when I get A1 from server I must put it into A column, B1 into B and so on, but when I get more than 3 children in same column I should create another column inside parent, I’m trying with css grid but I don’t know how to achive this mechanism.
this is what I’ve tried :

.children {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
  }
<div class="parent">
  <div>
    <span style="background: orange;">A</span>
    <div class="children">
      <div>A1</div>
      <div>A2</div>
      <div>A3</div>
    </div>
  </div>
  <div>
    <span style="background: red;">B</span>
    <div class="children">
      <div>B1</div>
      <div>B2</div>
      <div>B3</div>
    </div>
  </div>
  <div>
    <span style="background: green;">C</span>
    <div class="children">
      <div>C1</div>
      <div>C2</div>
      <div>C3</div>
    </div>
  </div>
</div>

And the result is this :
enter image description here

And when I add A4 for example, it should be like this :
enter image description here

As you can see, the width of A column has changed since we get 4 elements, I want the same mechanism in all columns A B C.
Have you an idea how can I achieve this ?

Tags:

2

Answers


  1. 0

    Updated answer:

    Add any additional column inside the additional-cols div, here is an example:

    Stackblitz Example

    Another solution is to repeat children with 2 columns by 1 frame:

    .children {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
}

    Here is another example on Stackblitz

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />

    <title>Static Template</title>
    <style>
    .parent {
        display: flex;
    }
    .children {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
    }
    </style>
</head>
<body>
    <div class="parent">
    <div>
        <span style="background: orange;">A</span>
        <div class="children">
        <div>A1</div>
        <div>A2</div>
        <div>A3</div>
        <div>A3</div>
        <div>A3</div>
        <div>A3</div>
        </div>
    </div>
    <div>
        <span style="background: red;">B</span>
        <div class="children">
        <div>B1</div>
        <div>B2</div>
        <div>B3</div>
        </div>
    </div>
    <div>
        <span style="background: green;">C</span>
        <div class="children">
        <div>C1</div>
        <div>C2</div>
        <div>C3</div>
        </div>
    </div>
    </div>
</body>
</html>
    Login or Signup to reply.
  2. 0

    Some grids within grids; how another div (D) would appear is controlled by the first grid – so like I have it here it would wrap below these three for example as does the A4 when added – just change the first grid column width to get it to NOT do so;

    body,
* {
  font-size: 16px;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  /* super center our parent in our view */
  display: grid;
  place-items: center;
  height: 100vh;
}

.parent {
  display: grid;
  /* the 8em is the width of each A B C block so with 8em we get space on children */
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: 1fr;
  grid-gap: 0.25em;
  background-color: #00FFFF10;
}

.parent>* {
  display: grid;
  grid-template-columns: auto;
  grid-template-rows: 2em 1fr;
  text-align: center;
  align-items: start;
}

.children {
  display: grid;
  grid-template-rows: 1fr;
  grid-template-columns: 1.5em;
  align-items: start;
  border: solid 1px #00FF00;
}

.children>* {
  border: solid 1px #00FF0B;
}
    <div class="parent">
  <div>
    <span style="background: orange;">A</span>
    <div class="children">
      <div>A1</div>
      <div>A2</div>
      <div>A3</div>
      <div>A4</div>
    </div>
  </div>
  <div>
    <span style="background: red;">B</span>
    <div class="children">
      <div>B1</div>
      <div>B2</div>
      <div>B3</div>
    </div>
  </div>
  <div>
    <span style="background: green;">C</span>
    <div class="children">
      <div>C1</div>
      <div>C2</div>
      <div>C3</div>
    </div>
  </div>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search