Microsoft-metro风格网格，动态构建

Question

我想制作一些可以填充3 X 3网格的jQuery插件（如microsoft-metro风格）。它应该是这样的：

• 如果我有1个图块，则应采用整个网格（1-9）。
• 如果我有2个瓷砖，则应该是一个瓷砖（1-6）和另一个瓷砖（7-9）。
• 如果我有3个瓷砖，则需要（1-2和4-5），（3和6），（7-9）
• 如果我有5个瓷砖，则需要（1-2），（3），（4-6），（7），（8-9）

等等！

-------------
| 1 | 2 | 3 |
-------------
| 4 | 5 | 6 |
-------------
| 7 | 8 | 9 |
-------------

是否可以根据切片的数量动态填充网格（最多9个）。是否有某种计算方法？

Answer 1

使用display: -ms-flex和-ms-flex-Wrap: wrap。这将让你自动换行。您需要根据需要调整项目大小。

另一种选择是使用-ms-grid，并根据项目配置列/行（和跨度）。