QML Responsive GridLayout

Question

I am trying to make my gridlayout responsive. It renders correctly when the window is created. If I try to maximize the application it leaves extra white spaces at the top and some at the bottom. I don't know how to fix this. Anyone have any ideas?

Correct:

Incorrect when maximized:

import QtQuick 2.15
import QtQuick.Controls 2.15
import QtQuick.Layouts 1.15

ApplicationWindow {
    id: window
    title: "Test"
    width: 1366
    height: 768
    visible: true

    GridLayout {
        id : grid
        anchors.fill: parent
        rows    : 2
        columns : 2
        rowSpacing: 0
        columnSpacing: 0

        Rectangle {
            color : 'red'
            width: 300
            height: window.height - 100
        }
        Rectangle {
            color : 'yellow'
            height: window.height - 100
            Layout.fillWidth: true
            
        }
        Rectangle {
            color : 'green'
            height: 100
            Layout.fillWidth: true
            Layout.columnSpan : 2
        }
    }

    

}

Answer 1

it's not recommended to mix explicit size and the Layout's one. That's why you use Layout, isn't it?

GridLayout {
    id : grid
    anchors.fill: parent
    rows    : 2
    columns : 2
    rowSpacing: 0
    columnSpacing: 0

    Rectangle {
        color : 'red'
        Layout.preferredWidth: 300
        Layout.fillHeight: true
    }
    Rectangle {
        color : 'yellow'
        Layout.fillHeight: true
        Layout.fillWidth: true

    }
    Rectangle {
        color : 'green'
        Layout.preferredHeight: 100
        Layout.fillWidth: true
        Layout.columnSpan : 2
    }
}