Is there a way to create an empty grid inside a QML GridLayout?

Question

I am trying to create a periodic table using QML. In order to arrange the elements properly (I use GroupBoxes) , I need to have blank space/empty grids. I already tried inserting empty Items into the desired grids but the GridLayout would just ignore them. Using empty GroupBoxes leads to little squares being left at the position where nothing is supposed to be.

Yet my Code looks like this:

 GridLayout {
            id: grid
            anchors.fill: parent  //grid erstreckt sich nun über ganzes Window
            columns: 18
            rows: 9

            GroupBox {
                //GroupBoxen werden maximal gestreckt in Höhe und Breite --> raum wird ausgefüllt
                Layout.fillHeight: true
                Layout.fillWidth: true

                ColumnLayout {
                    Label {
                        Layout.alignment: Qt.AlignLeft
                        text: qsTr("1")
                    }
                    Label {
                        Layout.alignment: Qt.AlignHCenter
                        text: qsTr("H")
                    }
                    Label {
                        Layout.alignment: Qt.AlignHCenter
                        text: qsTr("Hydrogen")
                    }
                }
            }
            Repeater {
                model: 16

                GroupBox {
                }
            }
            GroupBox {
                //GroupBoxen werden maximal gestreckt in Höhe und Breite --> raum wird ausgefüllt
                Layout.fillHeight: true
                Layout.fillWidth: true

                ColumnLayout {
                    Label {
                        Layout.alignment: Qt.AlignLeft
                        text: qsTr("1")
                    }
                    Label {
                        Layout.alignment: Qt.AlignHCenter
                        text: qsTr("H")
                    }
                    Label {
                        Layout.alignment: Qt.AlignHCenter
                        text: qsTr("Hydrogen")
                    }
                }
            }
            Repeater {
                model: 100

                GroupBox {
                    //GroupBoxen werden maximal gestreckt in Höhe und Breite --> raum wird ausgefüllt
                    Layout.fillHeight: true
                    Layout.fillWidth: true

                    ColumnLayout {
                        Label {
                            Layout.alignment: Qt.AlignLeft
                            text: qsTr("1")
                        }
                        Label {
                            Layout.alignment: Qt.AlignHCenter
                            text: qsTr("H")
                        }
                        Label {
                            Layout.alignment: Qt.AlignHCenter
                            text: qsTr("Hydrogen")
                        }
                    }
                }
            } 

Which lead to my application looking like this:

PeriodicTable qml

Answer 1

You can set the background of your placeholder GroupBox to be an Item like this

Repeater {
    model: 16

    GroupBox {
        background: Item {}
    }
}

or you could just use an Item directly like this

Repeater {
    model: 16
    Item {}
}