Extends Item

Grid

A grid will automatically position all its children in a grid.

property Int columns: 1

This property defines the number of columns in the grid.

The number of columns will be equally spaced between the width of the grid. Note if no width is defined then the grid will just stack each column on top of each other.

Rectangle {
    color: #white
    Grid as gridExample {
        width: 200; height: 200
        columns: 3
        Rectangle {
            width: gridExample.width/3; 
            height: 50; color: #grey
        }
        Rectangle {
            width: gridExample.width/3; 
            height: 50;
        }
        Rectangle {
            width: gridExample.width/3; 
            height: 50; color: #grey
        }
    }
}

property Float spacing

This property is used to define a regular vertical space between each row in the grid. To get the right spacing horizontally ensure the width and columns of the grid are set to the correct values.