Grid Layout

When the grid layout is chosen for the elements of a web application, the elements are aligned to a grid. This layout provides a very orderly appearance. The grid is defined by the number of columns and rows and adapts in height and width to the respective end device.

The <GridLayout> element creates a grid layout. When displaying the grid layout on smaller screens (smartphones, tablets), the number of columns remains the same, the columns are just displayed narrower.

For further information please visit the section

• <GridLayout>

• <ColumnDefinitions>

• <Column>

Example Grid Layout

<GridLayout columns="2" alternatingRows="true">
       <ColumnDefinitions>
             <Column width="1" />
             <Column width="2" />
       </ColumnDefinitions>
       <FlowLayout>
             <Label value="example" />
             <Label value="example" />
       </FlowLayout>
       <Label value="example" />
       <FlowLayout>
             <Label value="example" />
             <Label value="example" />
       </FlowLayout>
       <Label value="example" />
</GridLayout>