How to manually specify spacing and positioning of items in GridLayout of QML?

* When I specify rows: 12, and columns: 5, how are the sizes of one row, and one column determined by Qt? Am I supposed to expect the whole main window to be divided into 12 rows and 5 columns?

* In the following code, I have specified first rectangle in row 0 and second rectangle in row 2. I saw that Qt placed a random sized gap between the two buttons. How do I size the gap myself?

* I notice that when I move one item, other items also get displaced. How to fiddle with one item without disturbing others?

* Well, `Layout.alignment: Qt.AlignTop` did take things to the top corner, but is it necessary to use it? My rectangles where strangely placed before I used alignment.

Code:

---

GridLayout
        {
            id: gridLayout
            rows: 12;    columns: 5;    rowSpacing: 0;    columnSpacing: 0
 
            property int secondScreenOptionsOpacity: 0
 
            property int hmmiButtonRow: 0
            property int hmmiButtonCol: 0
 
            Rectangle
            {
                id: hmmi; opacity: gridLayout.secondScreenOptionsOpacity
                Layout.row: gridLayout.hmmiButtonRow; Layout.column: gridLayout.hmmiButtonCol;
                height: 75; width: 150; color: "pink";
                Layout.alignment: Qt.AlignTop
                Text { text: "HMMI"; anchors.centerIn: parent }
                MouseArea {anchors.fill: parent; onClicked: mainScreenFunctionality.hmmiControlButton()}
            }
 
            property int optionsButtonRow: 2
            property int optionsButtonCol: 0
 
            Rectangle
            {
                id: optionsButton; opacity: gridLayout.secondScreenOptionsOpacity
                Layout.row: gridLayout.optionsButtonRow; Layout.column: gridLayout.optionsButtonCol;
                height: 75; width: 150; color: "red"
                Layout.alignment: Qt.AlignTop
                Text { text: "Options..."; anchors.centerIn: parent }
                MouseArea { anchors.fill: parent; onClicked: mainScreenFunctionality.optionsButton() }
            }
        ...  
        ...  
   }

---

If you want the grid layout to fill the whole parent, anchor it with "fill: parent" to its parent.

The height of a row is determined by the maximum height of all items in that row.
Similarily, the width of a column is determined by the maximum wdith of all items in that column.

Cheers,
_

Quote:

---

Originally Posted by anda_skoa

The height of a row is determined by the maximum height of all items in that row.
Similarily, the width of a column is determined by the maximum wdith of all items in that column.

---

Thankful for the information.