正方形网格以适合其父级答案

【问题标题】：Grid of squares to fit its parent正方形网格以适合其父级
【发布时间】：2021-03-11 04:47:49
【问题描述】：

我需要创建一个响应式正方形网格。我的网格在它的父级内部，它也是响应式的。我希望我的网格完全适合其父级。我不知道如何实现它，仍然使用方形单元格。

我知道使用padding-bottom: 100% 使元素呈方形的技巧，但我不确定如何在此处应用它。另外，我不能只计算单元格的百分比，因为单元格的数量会发生变化。

这是我所拥有的：

.container {
    width: 400px;
    height: 300px;
    background: #ff8;
    border: 5px solid blue;
}

.grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
}

.grid > * {
    background-color: orange;
}

.grid > *::before {
    content: '';
    display: block;
    padding-top: 100%;
}

<div class="container">
    <div class="grid">
        <div></div> <div></div> <div></div> <div></div>
        <div></div> <div></div> <div></div> <div></div>
    </div>
</div>

以下图片可以更好地描述我的目标：

还能做到吗？

【问题讨论】：

看来你已经做到了，不是吗？我只看到缺少垂直对齐
@TemaniAfif 不，我对单元格的宽度和高度进行了硬编码以制作屏幕截图：) 图片反映了我的目标，附加的代码不会产生这种效果。
@TemaniAfif 你知道怎么做吗？
抱歉，我不清楚您的问题。
@TemaniAfif 怎么来的？我只需要将正方形网格（网格不换行）适合特定大小的父级。我认为这并不像听起来那么简单，或者我错过了一些东西。这是一个 React 应用程序，所以我的网格需要在水平和垂直方向上正确缩放任意数量的正方形，以及任意大小的父级。单元格必须是正方形。

标签： css responsive-design css-grid

【解决方案1】：

您可以将容器设置为flex 父级，然后将align-items 设置为grid 父级。

.container {
  width: 100%;
  min-height: 200px;
  background: #ff8;
  border: 5px solid blue;
  box-sizing: border-box;
  display: flex;
  align-items: center;
}

.grid {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}

.grid>* {
  background-color: orange;
  border-radius: 100%;
}

.grid>*::before {
  content: '';
  display: block;
  padding-top: 100%;
}

.container2 {
  width: 200px;
  min-height: 800px;
  background: #ff8;
  border: 5px solid blue;
  box-sizing: border-box;
  display: flex;
  align-items: center;
}

.container2 .grid {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 10px;
}

<div class="container">
  <div class="grid">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
  </div>
</div>

<div class="container2">
  <div class="grid">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
  </div>
</div>

【讨论】：

水平容器不能正常工作。请尝试width: 1000px。
啊，你是对的。让我看看有没有办法解决这个问题。
你找到什么了吗？ :)
我没有。如果我这样做并且可以更新它，我将把这个答案留在这里。当然是一个挑战！
谢谢，如果有问题请告诉我。

【解决方案2】：

@disinfor 的回答是正确的，但是如果你不想使用 flex 显示并保持网格显示，你是否尝试过添加百分比padding-top？

我还添加了一个 padding-bottom 来解决width: 1000px时的问题

.container {
    width: 1000px
    height: 300px;
    background: #ff8;
    border: 5px solid blue;
}

.grid {
    padding-top: 15%;
    padding-bottom: 15%;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
}

.grid > * {
    background-color: orange;
}

.grid > *::before {
    content: '';
    display: block;
    padding-top: 100%;
}

<div class="container">
    <div class="grid">
        <div></div> <div></div> <div></div> <div></div>
        <div></div> <div></div> <div></div> <div></div>
    </div>
</div>

【讨论】：

谢谢，但是disinfor的回答并不能完全奏效，请看我下面的评论。
@RoboRobok 我还添加了一个 padding-bottom 来解决宽度为 1000px 时的问题。立即尝试，让我知道这是否适合您。
为什么是 15%？它需要适用于任意数量的行、列和父宽度和高度:(
这只是一个例子@RoboRobok，现在你可以调整这个数字
就像我在问题中所说的那样，我不能只是“调整那个数字”，因为它是一个 React 应用程序，而且都是动态的。