如何在css网格中允许动态列空间给数据

fdx2calv 于 2023-06-25 发布在其他

关注(0)|答案(2)|浏览(122)

我想创建一个3父div：A B C，每个父级都有一个网格系统作为子级，当我从服务器获得A1时，我必须把它放在A列中，B1放在B列中，以此类推，但是当我在同一列中获得超过3个子级时，我应该在父级中创建另一个列，我正在尝试使用css网格，但我不知道如何实现这个机制。这就是我所尝试的：

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

结果是这样的：enter image description here
例如，当我添加A4时，它应该是这样的：enter image description here
正如你所看到的，A列的宽度已经改变了，因为我们得到了4个元素，我想在所有列A B C中使用相同的机制。你知道我怎样才能做到这一点吗？

css

来源：https://stackoverflow.com/questions/76531268/how-to-allow-dynamic-column-space-to-data-in-css-grid

2条答案

按热度按时间

ilmyapht1#

更新答案：
在additional-cols div中添加任何其他列，下面是一个示例：
Stackblitz Example
另一种解决方案是使用2列乘1帧重复子项：

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

这里是Stackblitz上的another example

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

赞(0）回复(0）举报 2023-06-25

fgw7neuy2#

一些网格内的网格;另一个div（D）的显示方式是由第一个网格控制的--所以就像我在这里看到的一样，它会在这三个网格的下面换行，例如，当添加A4时，它也会这样做--只要改变第一个网格的列宽就可以了;

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>

赞(0）回复(0）举报 2023-06-25

我来回答

如何在css网格中允许动态列空间给数据

2条答案

相关问题

热门标签

最新问答