javascript - 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，并根据项目配置列/行（和跨度）。