Qt Reference Documentation

Using Grid for Layouting


Using Grid element for creating scalable layouts.

This example demonstrates how Grid element can be used for creating a scalable layout. In this example number of columns and rows of the Grid changes on orientation change.


The width (itemWidth) and the height (itemHeight) of the GridItem when number of columns and rows are changed.

 property int itemWidth: Math.round((width - spacing * (columns - 1)) / columns)
 property int itemHeight: Math.round((height - spacing * (rows - 1)) / rows)

The number of columns and rows shown in the Grid changes when window.inPortrait changes.

 columns: window.inPortrait ? 1 : 2
 rows: window.inPortrait ? 6 : 3

Repeater instantiates six GridItem elements in the Grid.

 Repeater {
     model: 6

     GridItem {
         width: grid.itemWidth; height: grid.itemHeight
         text: index