Javascript 如何基于柱渲染三维阵列？

我一直在做一个矩阵式的用户界面-（这是一个座位布局）！所以，我通过一个二维和三维阵列循环来创建这个视图

所以，我基本上是使用行渲染，所以我无法控制每列之间的间距

下面是一个例子：

因此，从这张图中，可以看到黑色的矩形！它有一个大的垂直矩形和两个正方形！假设它的第1列和第4行（0,1,2,3-包括空白），现在问题是第一个矩形占据两个正方形，连续的两个正方形在它下面留下两个空白

因此，下一列再次以空格开始！换句话说，由于矩形的大小，正方形无法渲染到下一个直接列

如何做到这一点？如何拆分列和行

由于代码很长，我附上了一份零食——请检查一下

和预期输出，如图所示：

到目前为止，我尝试生成行和列的代码，zIndex：

seats = () => {
      
        const { seats = [] } = this.state.selectedSeatLayouts;
        let floorData = [];
        let maxLvl = 0;
        // Get max xyz levels
        seats.forEach((seat) => {
            const floor = (floorData[seat.zIndex] = floorData[seat.zIndex] || {
            maxCol: 0,
            maxRow: 0,
            });
            // Data appears to be 0 indexed, so add 1 to maxes
            if (seat.zIndex > maxLvl) maxLvl = parseInt(seat.maxLvl);
            if (seat.row > floor.maxRow) floor.maxRow = parseInt(seat.row);
            if (seat.column > floor.maxCol) floor.maxCol = parseInt(seat.column);
        });

        
        const seatsMapping = new Array(floorData.length);
        
            for (let i = 0; i < seatsMapping.length; i++) {
                const floor = floorData[i];
                //console.log(floor);
                // Add empty columns
                const columns = new Array(floor.maxCol);
                for (let g = 0; g <= floor.maxCol; g++) {
                columns[g] = [[]];
                for (let q = 0; q <= floor.maxRow; q++) {
                    // Add empty rows
                    columns[g][q] = null;
                }
                }
                seatsMapping[i] = columns;
            }

        seats.forEach((seat) => {
            if (seat != null) {
                const z = seat.zIndex || 0;
                const y = seat.column || 0;
                const x = seat.row || 0;
        
                // Plug seat into correct location
                seatsMapping[z][y][x] = seat;
            }
            });

seats=（）=>{
const{seats=[]}=this.state.selectedSeatLayouts；
设floorData=[]；
设maxLvl=0；
//获取最大xyz级别
座位。每个座位（（座位）=>{
const floor=（floorData[seat.zIndex]=floorData[seat.zIndex]|{
maxCol:0，
maxRow:0，
});
//数据的索引似乎为0，因此将1添加到最大值
如果（seat.zIndex>maxLvl）maxLvl=parseInt（seat.maxLvl）；
如果（seat.row>floor.maxRow）floor.maxRow=parseInt（seat.row）；
如果（seat.column>floor.maxCol）floor.maxCol=parseInt（seat.column）；
});
const seatsMapping=新数组（floorData.length）；
for（设i=0；i