动态按钮大小可确定未定义数量的元素

Question

我有一个Web应用程序，该应用程序在大div（高度设置为height: calc(100vh - 260px);，宽度设置为width: 100%中显示未定义数量的按钮。在此div中，它可以位于20-300个按钮之间的任何位置。按钮始终是正方形，每个按钮之间都有一点空白。

我目前正在通过以下方式（x，y和z均以像素值表示）作弊：

if buttonCount < 50 {
    height = x
    width = x
} else if buttonCount < 150 {
    height = y
    width = y
} else {
    height = z
    width = z}

其中x> y> z。有没有一种方法可以动态调整未定义数量的按钮的大小，以使其大小相等并适合div？