我希望有人能给我指出正确的方向。我有一个相当简单的网格的伸缩项目，高度设置为自动，但他们有不同的宽度33%，50%，67%，100%和换行到下一行。
当项目按正确的顺序排列时，这一切都很好。但我想要实现的是一种方法，将这些项目按顺序随机添加到页面中。
例如，一个包含50 | 33 | 67 | 50 | 100的列表可能会被重新排序为50 | 50 | 67 | 33 | 100，这样每行就会用尽它所能使用的最大的水平空间。我可能有一个大约100个项目的列表，并且它也会很好地混合它们，而不是说10个50%宽度的项目在一起，但一些行33 | 33 | 33或33 | 67混合在它们之间。我想不出一个单独使用CSS的方法来做到这一点。所以我一直在看各种JavaScript库，但他们似乎都专注于变换不同高度和固定宽度的项目。
我不需要改变项目的显示或位置，只是基于它们的宽度的顺序，所以也许我想得太多了，把它们放入一个数组并排序会更好。
任何帮助将非常感激!:)
对于任何感兴趣的人来说，我发现CSS grid使用grid-auto-flow: dense:
密度。如果指定，则自动放置算法将尝试填充网格中包含较小项目的可用空间，即使它们不在网格中
我的错，我认为CSS做不到这一点，并沿着Javascript的路线太快了。
这取决于你想怎么做，但我怀疑会有一个库。这似乎是一个非常具体的场景。我不能100%确定你想要的结果是什么，但如果我是你，我会做的是创建一个函数，自动排序这些程序。它可以像这样工作:
-
获取要按类型排序和分组的每个元素的引用。你可以为每个元素的宽度设置一个数组，分别为50%、67%、33%或任何你想要的宽度。
-
使用while循环遍历这些元素并将它们移动到您想要的最终顺序的结果数组中。您的条件可以是类似于"而这些宽度数组中的任何一个都有元素"
-
在while循环的每次迭代中，将元素从width数组移动到您认为最优顺序的最终结果数组中。这里有点棘手，因为你决定把这些放在哪里的方式取决于你想看到什么。一个简单的规则可以是这样的:"如果我们有两个元素可以相加到100%(50% +50%或67% + 33%)，那么从元素最多的数组中取元素。"否则，取%数值最大的单个元素，并将其从width数组移到result数组中。
-
使用对每个元素的引用来更新DOM，以匹配您在结果数组中记录的所需顺序。