GridLayout as a child of ColumnLayout

[daviraim]

Hi Forum,
There is something I do not understand with the ColumnLayout hierarchy.
If I put a GridLayout in a ColumnLayout, the display behavior becomes difficult to understand. I have attached image and QML code (with some comments in it).
If anyone could explain to me the right method to do what is expected, that would be nice. I probably misunderstood something in cascaded layouts.
Thanks a lot.
Regards,
David.

==== QML code can't be uploaded ====
import QtQuick 2.12
import QtQuick.Window 2.12
import QtQuick.Layouts 1.3
import QtQuick.Controls 2.4

Window
{
visible : true
width : 600
height : 250

Rectangle
{
    id                                              : backgroundId
    color                                           : "darkblue"
    anchors.fill                                    : parent

    // Beginning of ColumnLayout
    ColumnLayout
    {
        id                                          : columnLayoutId
        anchors.fill                                : parent
        anchors.margins                             : 20

        // Beginning of GridLayout
        GridLayout
        {
            id                                      : gridLayoutId
            columns                                 : 2


            // **** SOLUTION 1 ****
            // Works but generate a warning :
            // QML GridLayout: Detected anchors on an item that is managed by a layout. This is undefined behavior; use Layout.alignment instead.
            // Yet we do not want the GridLayout to cover the ColumnLayout space
            // This probably means that if we add items to the gridLayout, they will end up under the other items of the ColumnLayout
            anchors.fill                            : parent


            // **** SOLUTION 2 ****
            // Doesn't work, the GridLayout width doesn't take the ColumnLayout width
            // Does this mean that there is confusion between the Layout of GridLayout and that of ColumnLayout ?
            //Layout.fillWidth                        : true


            RoundButton
            {
                radius                              : 10
                id                                  : button1Id
                text                                : "Button 1..."

                // If we specify implicit sizes, it works but not if we use the Layout
                // In that case, I imagine the Layout references the GridLayout one, but I am wondering !
                // But if I enable the "SOLUTION 2", a warning is displayed : 'QML Rectangle: Binding loop detected for property "implicitWidth"'
                implicitHeight                      : 50
                implicitWidth                       : parent.width/2
                //Layout.fillWidth: true
            }

            Rectangle
            {
                radius                              : 10
                color                               : "green"

                // If we specify implicit sizes, it works but not if we use the Layout
                implicitHeight                      : 50
                implicitWidth                       : parent.width/2
                //Layout.fillWidth: true

                Label
                {
                    text                            : "Label2"
                    color                           : "black"
                    anchors.centerIn                : parent
                }
            }

            Rectangle
            {
                radius                              : 10
                color                               : "yellow"

                // If we specify implicit sizes, it works but not if we use the Layout
                implicitHeight                      : 50
                implicitWidth                       : parent.width/2
                //Layout.fillWidth: true

                Label
                {
                    text                            : "Label3"
                    color                           : "black"
                    anchors.centerIn                : parent
                }
            }
        }
        // End of GridLayout

        // Spacer
        Item
        {
            implicitHeight                          : 5
            Layout.fillWidth                        : true
        }

        Rectangle
        {
            radius                                  : 10
            color                                   : "red"
            implicitWidth                           : parent.width
            implicitHeight                          : 50

            Label
            {
                text                                : "Label4"
                color                               : "black"
                anchors.centerIn                : parent
            }
        }
    }
    // End of ColumnLayout
}

}