如何使用Bootstrap React编写可更改的网格代码？

Question

我有一个包含9个（最大）元素的网格。默认网格分辨率为3x3容器。在这种情况下，有时可以合并容器，并且可以更改容器的数量。例如，默认网格如下所示：

并且在合并的情况下看起来像：

任何容器都可以与其邻居合并。问题是：如何存储此类数据，以及如何遍历以进行渲染？我的案例或特殊的数据结构有什么类型的算法？

我的想法是：我们可以为每个容器分配特殊类型的编号并将其存储为纯数组。