CSS跨度网格调整大小？答案

【问题标题】：CSS Span Grid Resizing?CSS跨度网格调整大小？
【发布时间】：2021-05-30 23:17:03
【问题描述】：

我在 CSS 网格中设置了 12 个圆圈，大小都相同，甚至等等（我创建了一个基本的小提琴并添加了下面的代码）。该网格与其他一些内容一起位于带有 flex 的引导容器内。问题：当我调整页面大小时，我在其他网格和弹性框中的页面上的其他元素调整大小就好了。然而，这些圆圈都保持完全相同的大小，并且不会随着其他内容而改变。他们确实在容器周围移动，但不调整大小。我试过包装东西，改变#circle 父级，应用最小和最大宽度，各种！所以这真的让我很烦。我知道我已经使用跨度来实现这一点，我猜这就是我的问题所在（除非是因为它在 flex 容器中）。有没有办法继续使用这种方法？

非常感谢！

html:

<body>
    <main>
        <div class="container-fluid">
                <div id="circle">
                    <span></span>
                    <span></span>
                    <span></span>
                    <span></span>
                    <span></span>
                    <span></span>
                    <span></span>
                    <span></span>
                    <span></span>
                    <span></span>
                    <span></span>
                    <span></span>
                </div>
        </div>
    </main>
</body>

css:

body {
  margin: 0;
  padding: 0;
  background-color: black;
}

.container-fluid {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  width: 100%;
  height: auto;
  justify-content: center;
  align-items: center;
}

#circle {
  display: grid;
  grid-template-columns: 35px 35px 35px;
  grid-template-rows: 35px 35px 35px 35px;
  align-items: center;
  justify-content: center;
  height: 100%;
  
}

#circle span {
  display: inline-block;
  height: 2em;
  width: 2em;
  border-radius: 50%;
  background-color: red;
}

https://jsfiddle.net/cthjbdsn/17/#&togetherjs=3tlSpRSn5c

【问题讨论】：

标签： html css flexbox grid

【解决方案1】：

this 是你想要的吗？

我有：

将网格行和列的大小从 35px 更改为 1fr 以使单元格适应其容器。
将跨度大小从 2em 更改为 100% 以使其适应其单元格。
为容器添加了一个大小（这里是calc(3 / 4 * 100vh) x 100vh），但是您可以通过将容器放在某个地方并给它适当的大小来更改它。圆圈将根据其大小调整大小。

body {
  margin: 0;
  padding: 0;
  background-color: black;
}

.container-fluid {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  width: 100%;
  height: auto;
  justify-content: center;
  align-items: center;
}

#circle {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(4, 1fr);
  align-items: center;
  justify-content: center;
  height: 100vh;
  width: calc(3 / 4 * 100vh);
}

#circle span {
  display: inline-block;
  height: 100%;
  width: 100%;
  border-radius: 50%;
  background-color: red;
}

<body>
  <main>
    <div class="container-fluid">
      <div id="circle">
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
      </div>
    </div>
  </main>
</body>

【讨论】：

就是这样.. 他们现在正在调整大小，但他们也会挤压并且不会保持为圆圈。我需要它们成为一组可以调整大小的圆圈，类似于文本的大小。它只是根据调整大小而变大或变小。不过谢谢你，我会采纳你的建议，看看我是否可以从那里工作:)

【解决方案2】：

我以为我已经使用 fr 和 calc 修复了它，但它仍然有点笨拙（啊哈）。

我虽然发现了一些使用底部填充的东西，并最终实现了我打算做的事情，如下所示：

css:

body {
  margin: 0;
  padding: 0;
  background-color: black;
}

.container-fluid {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  width: 100%;
  height: auto;
  justify-content: center;
  align-items: center;
}

#circle {
  display: grid;
  grid-template-columns: auto auto auto;
  grid-template-rows: auto auto auto auto;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

#circle span {
  display: inline-block;
  border-radius: 50%;
  width: 5vw;
  height: 5vw;
  padding-bottom: 0vw;
  white-space: nowrap;
}

【讨论】：