Css 用于拟合其父对象的正方形网格

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

我知道用

填充底部：100%

使元素成正方形的诀窍，但我不知道如何在这里应用它。另外，我不能只计算单元格的百分比，因为单元格的数量可能会改变

以下是我所拥有的：

.container{
宽度：400px；
高度：300px；
背景:#ff8；
边框：5px纯蓝色；
}
.电网{
显示：网格；
网格模板列：重复（4，1fr）；
间隙：10px；
}
.grid>*{
背景颜色：橙色；
}
.grid>*：：之前{
内容：''；
显示：块；
填充顶部：100%；
}

---

您可以将容器设置为

flex

父容器，然后将

网格的
项对齐


.container{
宽度：100%；
最小高度：200px；
背景:#ff8；
边框：5px纯蓝色；
框大小：边框框；
显示器：flex；
对齐项目：居中；
}
.电网{
宽度：100%；
显示：网格；
网格模板列：重复（4，1fr）；
间隙：10px；
}
.grid>*{
背景颜色：橙色；
边界半径：100%；
}
.grid>*：：之前{
内容：''；
显示：块；
填充顶部：100%；
}
.集装箱2{
宽度：200px；
最小高度：800px；
背景:#ff8；
边框：5px纯蓝色；
框大小：边框框；
显示器：flex；
对齐项目：居中；
}
.集装箱2.格栅{
宽度：100%；
显示：网格；
网格模板列：重复（7，1fr）；
间隙：10px；
}
@disifor的答案是正确的，但是如果您不想使用flex显示并保持网格显示，您是否尝试添加百分比
填充顶部

我还添加了一个填充底部，以解决
width:1000px


.container{
宽度：1000px
高度：300px；
背景:#ff8；
边框：5px纯蓝色；
}
.电网{
垫面：15%；
垫底：15%；
显示：网格；
网格模板列：重复（4，1fr）；
间隙：10px；
}
.grid>*{
背景颜色：橙色；
}
.grid>*：：之前{
内容：''；
显示：块；
填充顶部：100%；
}

看来你已经这么做了，不是吗？我只看到垂直对齐missing@TemaniAfif不，我硬编码了单元格的宽度和高度来制作屏幕截图：）图像反映了我的目标，附加的代码不会产生这种效果。@Temaniaff你知道怎么做吗？对不起，我不清楚你的问题。@Temaniaff为什么会这样？我只需要将正方形网格（网格不包裹）拟合到特定大小的父级。我觉得事情不像听起来那么简单，或者我遗漏了什么。这是一个React应用程序，所以我的网格需要在水平和垂直方向上适当缩放任意数量的正方形，再加上任何大小的父网格。单元格必须是正方形。对于水平容器，它不能正常工作。请尝试使用
宽度：1000px
。啊，你说得对。让我看看有没有办法解决这个问题。非常感谢。你找到什么了吗？：）我没有。我将在这里留下这个答案，以备将来我可以更新它。当然是个挑战！谢谢你，但是Desifor的回答并不完全有效，请看我下面的评论。@RoboRobok我还添加了一个填充底部，以解决宽度为1000px时的问题。现在试试，让我知道这对你是否有效。为什么是15%？它需要适用于任意数量的行、列以及父级宽度和高度：（这只是@RoboRobok的一个例子，现在你可以调整这个数字，就像我在问题中所说的，我不能只是“调整那个数字”，因为它是一个React应用程序，而且是动态的。