Javascript 如何分发数量可变的卡？

我正在尝试创建一个纸牌游戏，就像一个琐事。卡的数量是可配置的（在1到9之间）。其中一个要求是卡片必须“居中”。这意味着它们分布在一个中心点周围（但不像一个圆），在父边界和它们自身之间均匀分布，等等。我认为这种分布可能是怎样的

我使用的几乎都是普通元素——只有节点和网页包，没有框架/库。我曾经考虑过使用CSS网格，但是如果你看到图片，很明显3x3网格不起作用-卡片应该放在角落里，这意味着卡片离中心太远，4张卡片的“理想”位置会重叠网格线。我还可以计算JS中每张卡的位置，但那可能是重新发明轮子？据我所知，计算可以由CSS执行，因此应该有另一种方法，而无需手动计算

我尝试过使用网格，但它似乎只能提供这么多的灵活性——也许使用更精细的网格会有所帮助，但我不知道这是否是最好的选择

我只需要一些想法，我可以如何处理它，或至少正确的搜索词-几乎所有的情况下，我找到的画廊风格的分布，像一个典型的网格。如果您愿意，我可以提供代码，但只要指向正确的方向也会有帮助。提前谢谢

---

编辑：断开的图像链接

引导程序的网格应该可以正常工作。您甚至不需要定义固定行，只需编写

<div class="row justify-content-center>
<div id="card1" class="col-4"></div>
//As many cards as you want
</div>

---

引导程序的网格应该可以正常工作。您甚至不需要定义固定行，只需编写

<div class="row justify-content-center>
<div id="card1" class="col-4"></div>
//As many cards as you want
</div>

如果目标是在您的图像中看到的布局/分布，那么您可以使用flexbox，几乎可以将其从盒子中取出，只有带有4张卡（2x2）的“电路板”需要解决。因此，对于2x2，您只需要在创建元素时将额外的类应用于元素

小提琴：


*{
框大小：边框框；
}
.董事会{
显示器：flex；
宽度：400px；
高度：210px；
对正内容：空间均匀；
对齐项目：居中；
边框：1px实心；
柔性包装：包装；
浮动：左；
}
B.董事会-4{
填充：0px 20px；
}
.卡片{
背景：#a20；
宽度：100px；
高度：50px；
弹性收缩：0；
利润率：10px；
}
如果目标是在图像中看到的布局/分布，那么您可以使用flexbox，几乎可以将其从框中正确取出，只有带有4张卡（2x2）的“电路板”需要解决。因此，对于2x2，您只需要在创建元素时将额外的类应用于元素

小提琴：


*{
框大小：边框框；
}
.董事会{
显示器：flex；
宽度：400px；
高度：210px；
对正内容：空间均匀；
对齐项目：居中；
边框：1px实心；
柔性包装：包装；
浮动：左；
}
B.董事会-4{
填充：0px 20px；
}
.卡片{
背景：#a20；
宽度：100px；
高度：50px；
弹性收缩：0；
利润率：10px；
}

使用模数可以动态创建整个布局。数字%3==0？新行：同一行；您还可以在DOM中设置九个框，并动态隐藏/显示可用框。这些卡有固定的宽度和高度吗？@Callam，是的，这些卡有固定的宽度和高度height@MattBunch是的，但是我无法实现4张卡的2x2分发。为了澄清这一点，问题更多地集中在如何定位卡，使其在板（父容器）中心和边框以及卡本身周围的间距均匀。使用模数，您可以动态创建整个布局。数字%3==0？新行：同一行；您还可以在DOM中设置九个框，并动态隐藏/显示可用框。这些卡有固定的宽度和高度吗？@Callam，是的，这些卡有固定的宽度和高度height@MattBunch是的，但是我无法实现4张卡的2x2分发。要澄清的是，问题更多地集中在如何定位卡片，使其在板（父容器）中心和边框周围的间距均匀，以及卡片本身。我仍然建议使用引导，而不是为自己编写带有FlexBox的网格系统，因为这更容易。谢谢您的建议。在我看来，我认为将Bootstrap添加到项目中仅仅用于卡片布局可能会有点过头，而且正如您所提到的，可以实现一个原生CSS解决方案。我仍然建议使用Bootstrap，而不是为您自己编写一个带有FlexBox的网格系统，因为它更容易。谢谢您的建议。在我看来，我认为将引导添加到项目中仅仅用于卡片布局可能会有点过头，而且正如您所提到的，可以实现一个原生CSS解决方案。是的，这就是我想要的！我的CSS知识非常有限，所以我似乎需要更多地了解flexbox，我认为它只适用于单行应用程序。谢谢你，马蒂亚斯！是的，这就是我要找的！我的CSS知识非常有限，所以我似乎需要更多地了解flexbox，我认为它只适用于单行应用程序。谢谢你，马蒂亚斯！