QML Grid using SplitView to drag the rows up and down and columns left and right?

Question

I want to eventually create a grid that has 2 rows and 9 columns and then within some of those cells, I want to split those to have different items within them etc.

Here, I have grid that only has 2 rows and 1 column and I have used SplitView in the top row to display 3 columns that can be dragged. I want to be able to use this for rows as well so that they can be dragged up and down too. Is it possible to use 2 SplitViews - 1 for rows and 1 for columns? Or is there a better solution to this? I will also eventually want one of the columns to have a fixed sized but the other ones are a default percentage size of window and are resizable.

This is the code I have at the moment, I like how it looks but I want to be able to resize the row height by dragging it up and down. Not sure if SplitView is the best way to go about it:

Rectangle {
    id: root
    height: 400
    width: 600

    Grid {
        columns: 1
        rows: 2

        Row {

            Rectangle {
                   width: root.width
                   height: root.width * 0.5

                SplitView {
                    anchors.fill: parent
                    orientation: Qt.Horizontal

                    PinkRect {
                    width: 200
                    Layout.maximumWidth: 400
                    }
                    PurpleRect {
                    Layout.minimumWidth: 50
                    Layout.fillWidth: true
                    }
                    OrangeRect {
                    width: 200
                    }
                }
            }
        }
        Row {
            BrownRect {
                width: root.width
                height: root.width * 0.5
            }
        }
    }
}

Answer 1

You can nest SplitViews:

Window {
id: root
visible: true
width: 800
height: 600
title: "Test app"

SplitView {
    orientation: Qt.Vertical
    anchors.fill: parent

    SplitView {
        orientation: Qt.Horizontal
        SplitView.minimumWidth: 150
        SplitView.minimumHeight: 150

        Rectangle {
            color: "red"
            SplitView.minimumWidth: 150
            SplitView.minimumHeight: 150
        }
        Rectangle {
            color: "green"
            SplitView.minimumWidth: 150
            SplitView.minimumHeight: 150
        }
        Rectangle {
            color: "blue"
            SplitView.minimumWidth: 150
            SplitView.minimumHeight: 150
        }
    }

    SplitView {
        orientation: Qt.Horizontal
        SplitView.minimumWidth: 150
        SplitView.minimumHeight: 150

        Rectangle {
            color: "blue"
            SplitView.minimumWidth: 150
            SplitView.minimumHeight: 150
        }
        Rectangle {
            color: "green"
            SplitView.minimumWidth: 150
            SplitView.minimumHeight: 150
        }
        Rectangle {
            color: "red"
            SplitView.minimumWidth: 150
            SplitView.minimumHeight: 150
        }
    }

}
}