Creating a 6x4 grid in qml - qt

Question

I am trying to create a grid, consisting of squares. It is a 6X4 grid. The code which I am using to make the grid is below
import QtQuick 2.9
import QtQuick.Window 2.2
import QtQuick.Layouts 1.3
import QtQuick.Controls 1.4
import QtQuick.Window 2.3
Window {
visible: true
width: 640
height: 480
title: qsTr("Mini Keno")
ColumnLayout {
spacing: 1
Item {
Row {
spacing: 1
Repeater {
id: mmm
model: 5
Rectangle {
id: imgl
width: 50
height: 50
color: "#4286f4"
property string src: ""
MouseArea {
anchors.fill: parent
onClicked: {
parent.color = "4286f4"
parent.color = "#2345F6"
}
}
}
}
}
}
Item {
Row {
spacing: 1
Repeater {
id: mm2
model: 5
Rectangle {
id: img2
width: 50
height: 50
color: "#4286f4"
property string src: ""
MouseArea {
anchors.fill: parent
onClicked: {
parent.color = "4286f4"
parent.color = "#2345F6"
}
}
}
}
}
}
}
}
This code is I am trying to create two lines of the grid, but the other line is not visible. So how to solve this problem of the grid where the squares are clickable. Also, how can I place the grid in the middle of the window?

Answer 1

height and width properties missing for Item, so Item has zero height, width. So the second row is overlapped with the first row.
Use anchors to make the layout in center, i.e anchors.centerIn: parent
import QtQuick 2.9
import QtQuick.Window 2.2
import QtQuick.Layouts 1.3
import QtQuick.Controls 1.4
import QtQuick.Window 2.3
Window {
visible: true
width: 640
height: 480
title: qsTr("Mini Keno")
ColumnLayout {
anchors.centerIn: parent // place layout in center
spacing: 1
height: 100
Item {
width: 300 // widht of item
height: 50 // height of item
Row {
spacing: 1
Repeater {
id: mmm
model: 5
Rectangle {
id: imgl
width: 50
height: 50
color: "#4286f4"
property string src: ""
MouseArea {
anchors.fill: parent
onClicked: {
parent.color = "4286f4"
parent.color = "#2345F6"
}
}
}
}
}
}
Item {
width: 300 // widht of item
height: 50 // height of item
Row {
spacing: 1
Repeater {
id: mm2
model: 5
Rectangle {
id: img2
width: 50
height: 50
color: "#4286f4"
property string src: ""
MouseArea {
anchors.fill: parent
onClicked: {
parent.color = "4286f4"
parent.color = "#2345F6"
}
}
}
}
}
}
}
}