Use rectangles to create basic layout

Rectangle is a basic Qml type, I will introduce how to embed two rectangles in one rectangle in this article. First, let's see the screenshot:

The red rectangle has two children, one is blue, another one is green.

Create a test.qml file like so:

import QtQuick 2.0
Rectangle {
    Rectangle {
        id: r1
        anchors.left: parent.left
        anchors.leftMargin: 5
        anchors.top: parent.top
        anchors.topMargin: 5
        width: 107
        height: 309
        color: "red"
        Rectangle {
            id: r11
            anchors.left: parent.left
            anchors.leftMargin: 5
            anchors.top: r1.top
            anchors.topMargin: 5
            width: 90
            height: 94
            color: "blue"
        }
        Rectangle {
            id: r12
            anchors.left: parent.left
            anchors.leftMargin: 5
            anchors.top: r11.bottom
            anchors.topMargin: 5
            width: 90
            height: 94
            color: "green"
        }
    }
}

The outermost rectangle can be ignored.
Now run the test.qml using following command:

~/Qt5.2.0/5.2.0/gcc_64/bin/qmlscene ./test.qml 

You will see the above diagram.
Note, do not forget to set width of rectangle, otherwise you will not able to see the inner rectangles.