离子3自动调整网格布局

Question

我使用离子网格和一个离子排构建了一个仪表板。离子行包含10-12个离子色谱柱。所以基本上，只要屏幕宽度被击中，列就会开始向下流动。

这一切都很好并且符合预期。但是，当这些列具有不同的宽度和高度时，问题就开始了。我已经定义了3种宽度类型的col：200px，400px和600px。高度也有3种变化200px，400px和600px。因此总体上每个col可以是1 * 1,2 * 1,1 * 2,2 * 2,3 * 1和3 * 2大小。

我正在使用dragula来拖放标题以根据需要调整布局。但是，初始布局总是呈现一些洞，尽管它们可以通过手动拖放来填充。

那么，在初始时应该采用什么方法来处理它以避免布局中的漏洞。

Answer 1

您可能可以使用css flex grow。为每一行使用一个父div，并将css设置为

.row {
  display: flex;
  justify-content: center;
  align-items: center
}

对于每列使用flex grow来定义它们的大小。

例如。 flex-grow：1 - 正常，flex-grow：2表示更大的宽度。

在这里，我已经附上了我的所作所为。在我的情况下，列号应该是动态的，但具有相同的。