import QtQuick
import QtQuick.Controls
import QtQuick.Layouts
import QtQuick.Window

Window {
    id: root

    height: 400
    visible: true
    width: 600

    GridLayout {
        id: layout

        property int filledUpToIndex: Math.floor(itemTotalCount / itemPerRow)
                                      * itemPerRow
        property int itemPerRow: Math.ceil(Math.sqrt(itemTotalCount))
        property int itemTotalCount: 13 // or 22

        anchors.fill: parent
        columns: itemPerRow * 2
        rows: Math.ceil(itemTotalCount / itemPerRow)
        uniformCellHeights: true
        uniformCellWidths: true

        Repeater {
            id: repeater

            model: layout.itemTotalCount

            Rectangle {
                required property int index

                Layout.column: {
                    if (index >= layout.filledUpToIndex) {
                        return (index % layout.itemPerRow) * 2 + (
                                    layout.columns - (layout.itemTotalCount
                                                      - layout.filledUpToIndex)
                                    * 2) / 2;
                    } else {
                        return (index % layout.itemPerRow) * 2;
                    }
                }
                Layout.columnSpan: 2
                Layout.fillHeight: true
                Layout.fillWidth: true
                Layout.horizontalStretchFactor: 1
                Layout.row: Math.floor(index / layout.itemPerRow)
                Layout.verticalStretchFactor: 1
                color: "red"
            }
        }
    }
}