How to make component positioning in mig layout

Question

bad part in the red square:

the question is how can i make every panel to be the same size only B3 and B4 need to be half of the other panels. Can someone help me? if I set the size

This happens if i force the pane sizes i will have this gap next to B4:

for(int i = 0; i < 60; i++) { //this is the for cycle

 if (i == 0){
            panel.add(pane,"wrap,cell 0 0 14 0,right"); // creating the first //panel the time panel in the right corner

        }
        if (i == 58){
            panel.add(pane,"cell 0 9 1 0,left");
        }
        if (i == 59){
            panel.add(pane,"cell 1 9 14 1,left,span");
        }

        if (i>0 & i<3){
            panel.add(pane, " push,grow");
            pane.setBackground(Color.yellow);
            pane.add(button, "span,push, grow");
        }
        if (i==3){
            panel.add(pane, " push,grow");
            pane.setBackground(Color.yellow);
            pane.add(button, "span ,push, grow");
        }
        if (i>3 & i<7){
            panel.add(pane, " push,grow");
            pane.setBackground(Color.yellow);
            pane.add(button, "span,push, grow");
        }
        if (i==7){
            panel.add(pane,"wrap 3, push, grow");
            pane.setBackground(Color.yellow);
            pane.add(button, "span ,push, grow");

        }

        if (i>7 & i<10){
            panel.add(pane, "push , grow");
            pane.setBackground(Color.yellow);
            pane.add(button, "span,push, grow");
        }  
                    if (i==10){
                        panel.add(pane, "push , grow,split 2, w 0, h 0, , "  ); // split it to two this is what dosn't works
                        pane.setBackground(Color.yellow);
                        pane.add(button, "span,push, grow");
                    }
                    if (i==11){
                        panel.add(pane, "push ,grow,");
                        pane.setBackground(Color.yellow);
                        pane.add(button, "span,push, grow");
                    }
        if (i>11 & i<15){
            panel.add(pane, "push , grow");
            pane.setBackground(Color.yellow);
            pane.add(button, "span,push, grow");
        } 
        if (i==15){
            panel.add(pane,"wrap 3, push, grow");
            pane.setBackground(Color.yellow);
            pane.add(button, "span,push, grow");
        }
        if (i>15 & i<22){
            panel.add(pane, "push , grow");
            pane.setBackground(Color.yellow);
            pane.add(button, "span ,push, grow");
        }
        if (i==22){
            panel.add(pane,"wrap 3, push, grow");
            pane.setBackground(Color.yellow);
            pane.add(button, "span ,push, grow");
        }
        if (i>22 & i<29){
            panel.add(pane, "push , grow");
            pane.setBackground(Color.yellow);
            pane.add(button, "span ,wrap 3,push, grow");
        }

where i=10 and i=11 that is the B3 B4 panel I try to with the split fuction but dos not work.

Answer 1

split [count] splits the cell in a number of sub-cells. Practically this means that the next count number components will be put in the same cell, next to each other without gaps. Only the first component in a cell can set the split, any subsequent split keywords in the cell will be ignored. "split", "wrap" or "newline" will break out of the split cell. The latter two will move to a new row/column as usual.

So remove additional parameters, which break proper split function.

It is equally easy and intuitive to split cells.

panel.add(comp1);
panel.add(comp2, "split 2"); // Split the cell in two
panel.add(comp3); // Will be in same cell as previous
panel.add(comp4, "wrap"); // Wrap to next row
panel.add(comp5);

Visually its looks like that: