Custom control with different size rectangle

[Makarand_EB]

I want to implement one control with 7 layers of rectangle. Top and bottom 2 rectangles are of the same size. But middle 3 rectangles are 1/3rd of width of the top and bottom 2 rectangles also two of such sets.

How can it be achieved using the minimal code in QML. ( i.e. with 1 repeater or nested repeaters ?)

I designed it using repetitive code by simply adding 10 rectangles and anchoring them properly but its not a good practice when things can be done with repeater / model.

[ODБOï]

@Makarand_EB

GridLayout{
        anchors.fill: parent
        columns : 3
        Repeater{
            model: 13
            Rectangle{
                Layout.fillHeight: true
                Layout.fillWidth: true
                border.width: 1
                Layout.columnSpan: index===0||index===1||index===11||index===12 ? 3 : 1
                opacity : index===3||index===6||index===9 ? 0 : 1
            }
        }
    }