I'm using Susy and want to create a Grid to show some elements (charts actually) whose order is determined at runtime (user can change the order). The problem is, there are charts that are preferably shown wider than others.
Suppose at a certain width I have 6 columns, and I have two types of charts, a small one preferably taking 2 columns and a wide one preferably taking 4 columns.
- when I have a small and a wide one, I want them to fill the row as 2 + 4 columns (meaning the wide one would need have "at 3" specified).
- when I have two small ones I want them to fill the row as 3 + 3 columns (meaning the second one would need to have "at 4" specified).
- when I have two wide ones, I want them over two rows, so each taking 6 columns ("at 0").
So let's say the order is 3 small ones, 2 wide ones, 1 small one and 2 wide ones, then the rows would look like this:
3+3
2+4
4+2
6
6
At other widths the rules may be different. I know how to use breakpoints / element queries so I know how to apply different SCSS depending on the width. But to me it seems the order of wide/small elements must be known when writing the SCSS. How can this be done when the order isn't known?