QML - GridLayout - unable to center a page using it

[Vildnex]

I'm new to Qt and QML and while I'm trying to learn them I've encountered the following problem which I'm not sure why they appeared.

I'm having a button, at the moment when I'm pressing it will display a new purple Rectangle over the screen. I am trying to position it at the center of the screen, or in other words to fill the whole screen, but for some reason, I can't do that, and It's always going to start from the beginning of Item 2 instead of the beginning of the screen. Also, it's going to be placed under Item 1 and Item 3 instead to overlay them.

MY CODE:

import QtQuick 2.14
import QtQuick.Window 2.14
import QtQuick.Layouts 1.14
import QtQuick.Controls 2.12

Window {
    id: mainD
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")

    GridLayout {
        id : grid
        anchors.fill: parent
        rows    : 12
        columns : 20
        property double colMulti : grid.width / grid.columns
        property double rowMulti : grid.height / grid.rows
        function prefWidth(item){
            return colMulti * item.Layout.columnSpan
        }
        function prefHeight(item){
            return rowMulti * item.Layout.rowSpan
        }
        Rectangle {
            id: id1
            color : 'red'
            Layout.column: 0
            Layout.rowSpan: 10
            Layout.columnSpan: 2
            Layout.preferredWidth  : grid.prefWidth(this)
            Layout.preferredHeight : grid.prefHeight(this)
        }
        Rectangle {
            id: id2
            color : 'green'
            Layout.column: 2
            Layout.rowSpan: 10
            Layout.columnSpan: 18
            Layout.preferredWidth  : grid.prefWidth(this)
            Layout.preferredHeight : grid.prefHeight(this)
            Button{
                width: 100
                height: 100
                anchors.horizontalCenter: parent.horizontalCenter
                anchors.verticalCenter: parent.verticalCenter
                onClicked: {
                    id2.state = "STATE_1"
                }
            }

            StackView{
                id: st
                width: parent.width
                height: parent.height + 100
                
                anchors.horizontalCenter: grid.parent.horizontalCenter
                anchors.verticalCenter: grid.parent.verticalCenter

                visible: false
                Rectangle{
                    anchors.fill: parent
                    color: "purple"
                    opacity: 0.7
                    Button{
                        width: 100
                        height: 100
                        onClicked: {
                            id2.state = "STATE_2"
                        }
                    }
                }
            }

            states: [
                State{
                    name: "STATE_1"
                    PropertyChanges {
                        target: st;
                        visible: true
                    }
                },
                State{
                    name: "STATE_2"
                    PropertyChanges {
                        target: st;
                        visible: false
                    }
                }
            ]
        }
        Rectangle {
            id: id3
            color : 'blue'
            Layout.column: 18
            Layout.rowSpan: 10
            Layout.columnSpan: 2
            Layout.preferredWidth  : grid.prefWidth(this)
            Layout.preferredHeight : grid.prefHeight(this)
        }
    }
}

Can anyone explain to me what I am doing wrong?