在原来的宜搭报表中，要想搭建一个图表排列紧凑、工整有序的典型报表页面，我们通常需要在流式布局的基础上，通过套「分栏组件」、「容器组件」来包裹图表组件完成布局。如果想要实现如下图的错行渲染的效果，还少不了定义高度等各种样式。在流式布局基础上搭建报表页面有一定的成本。
纵观各类BI产品（QuickBI、BDP）以及和宜搭同类型低代码产品（简道云、氚云），报表/仪表盘页面搭建场景基本上都使用磁贴布局，这也说明磁贴布局适用于报表场景是经过了充分验证的。
趁着报表升级项目的契机，我们把磁贴布局的改造提上了日程。
布局效果先来看看报表磁贴布局改造完成的大致效果~
磁贴布局介绍下图很好地概括了磁贴布局的基础能力。
尽管这些功能各家产品的磁贴布局能力都基本具备，但到画布上实际操作，我们会发现每家的具体交互、体验效果还是有很多不一样的地方。比如说物料新增的方式、拖动的效果、磁贴挤占的算法，这些虽然不影响最终搭建出来的效果，但会对搭建时的体验会有较大影响。另外，是否支持磁贴嵌套，磁贴块高度自适应，这些能力会影响到运行态页面的效果。
磁贴挤占方式、磁贴嵌套、磁贴块高度自适应具体是什么样的效果，接下来想给大家一一介绍一下：
纵向挤占和横向挤占
纵向挤占布局时，元素会在垂直方向（y轴方向）紧凑布局
优点：从上往下，符合直觉缺点：这种挤占方式使得横向相邻的元素无法方便地交换位置（当横向拖拽磁铁块时，被碰撞到的磁贴块会在纵轴方向移动，腾出空间给正在拖拽的磁铁块）横向挤占布局时，元素会在横轴方向（x轴方向）紧凑布局
优点：这种布局可以实现横向元素的位置交换缺点：在调整上方磁贴块高度时，纵轴方向下方的元素不会自动跟随由于页面是从上往下排的，因此整体来说纵向挤占布局更加符合直觉，这也是大部分产品使用纵向挤占的原因。
磁贴嵌套
如下图就是磁贴嵌套的场景，Tab标签组件作为页面中的磁贴块，同时它自己本身又是一个磁贴容器，往里面拖入图表也会生成磁贴块。
高度自适应
高度自适应主要适用于图表高度会改变的组件，如下图展示的表格组件，筛选条件的变化会触发它行数量的变化，导致它高度发生变化。如果此时还是用磁贴块固定的高度信息，当数据减少时，就会在磁铁块内出现内容空白，导致页面整体不美观。高度自适应的功能就是用来解决这个问题的。图表组件开启高度自适应后，它只有宽度能被调整，其高度在每次重新渲染时动态计算。
上面介绍的磁贴布局的能力，大部分参考了下列这些优秀的产品，其中BDP、简道云、氚云的组件配置和页面布局分离的操作让我们眼前一亮，QuickBI实现的磁贴嵌套、高度自适应十分值得学习。
QuickBIBDP简道云大小调整方式8个方向可调整大小右下角可调整右下角可调整位置调整方式图表区域拖拽图表左上角小范围可拖拽图表区域拖拽物料新增点击新增时，若当前选中的是画布则将图表放到最后；若当前选中的是某个图表，则替换当前选中图表类型；拖拽时显示鼠标位置，释放时添加图表计算布局直接添加到画布最后或根据鼠标位置添加图表布局和组件配置分离拖动效果有占位背景提示和辅助线，实时计算布局；可拖动滚屏有占位背景提示，无拖动滚屏有占位背景提示，无拖动滚屏挤占方式纵向挤占纵向挤占纵向挤占是否支持嵌套是否；无容器类组件否，无容器类组件是否支持高度自适应是否否宜搭报表的磁贴布局实现参考了上面这些产品的磁贴布局实现，我们根据自己的情况实现了一版磁贴布局。
其中，大小调整、位置调整、自动挤占、错行渲染这些基础的磁贴布局能力，我们选择直接借助React-grid-layout这一非常棒的开源库，而物料拖拽、拖动滚屏、空位插入等功能，我们是对设计器的底层——集团低代码引擎进行了相应的适配改造。在React-grid-layout和低代码引擎的有机结合基础之上，我们继续增强了磁贴布局的能力。除了前文提到的高度自适应以外，我们还实现了磁贴流式布局的混排，以及横纵方向的同时紧凑布局。
React-grid-layout和低代码引擎的结合
首先，我们先简单介绍一下React-grid-layout，它是一个基于React实现的磁贴布局库，上面挤占方式的介绍就是它的Demo（