How to position items in Gridlayout
<p>I am adding <code>Image</code> objects dynamically to a <code>GridLayout</code> in a <code>QML</code> file in <code>qt</code>. I want to position the image items so that each new image item comes to the right side of the previous one and if there is no place in that row, it is placed directly to the next row. It is exactly the way how I typed this question, <em>i.e.</em> letters are my image items and text box is the layout.</p>

<p>However the output is following:</p>

<p><a href="https://i.stack.imgur.com/OomW9.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/OomW9.png" alt="Screenshot of my layout"></a></p>

<p>The layout leaves space between items as seen in the screenshot. I've read through the properties of gridlayout and tried many combinations out but didn't come up with the right combination. These are the properties I set so far:</p>

<pre><code>GridLayout {
    id: myLayout
    anchors.fill: parent

    columnSpacing: preferredColumnSpacing
    rowSpacing: preferredRowSpacing

    Component {
        id: myImageComponent
        Image {
            visible: true
            Layout.alignment: (Qt.AlignLeft | Qt.AlignTop)
            Layout.preferredWidth: preferredImageWidth
            Layout.preferredHeight: preferredImageHeight
        }
    }
}
</code></pre>

<p>Which modification gives me the expected behaviour?</p>

<p><strong>Edit:</strong> in the screenshot above, the layout has 9 columns, 4 rows but 17 image items.</p>