使用Suzy的动态响应网格

Question

我正在使用Susy并且想要创建一个Grid来显示一些元素（实际上是图表），这些元素的顺序是在运行时确定的（用户可以更改顺序）。 问题是，有些图表最好比其他图表更广泛。

假设在某个宽度上我有6列，我有两种类型的图表，一个小图表最好是2列，一个宽图表最好是4列。

1. 当我有一个小而宽的一个时，我希望它们将行填充为2 + 4列（意味着宽的一个需要＆＃34;在3＆＃34;指定）。
2. 当我有两个小的时候，我希望它们将行填充为3 + 3列（意味着第二列需要＆＃34;在4＆＃34;指定）。
3. 当我有两个宽的时候，我想要它们超过两行，所以每个都需要6列（＆＃34;在0＆＃34;）。

所以，让我们说顺序是3个小的，2个宽的，1个小的和2个宽的，然后行看起来像这样：

  

3 + 3

     

2 + 4

     

4 + 2

     

6

     

6

在其他宽度处，规则可能不同。我知道如何使用断点/元素查询，所以我知道如何根据宽度应用不同的SCSS。但对我来说，在编写SCSS时，似乎必须知道宽/小元素的顺序。如果订单不知道怎么办呢？