As its name suggests, Gridlayout arranges the children in a table structure of rows and columns. GridLayout has one row and one column by default, but we can add additional rows and columns by passing them to the layout:

<GridLayout columns="auto, *" rows="auto, *" width="210" height="210"
    backgroundColor="lightgray">
    <Label text="Label 1" row="0" col="0" backgroundColor="red"></Label>
    <Label text="Label 2" row="0" col="1" colSpan="2" 
     backgroundColor="green">            </Label>
    <Label text="Label 3" row="1" col="0" rowSpan="2" 
     backgroundColor="blue">                </Label>
    <Label text="Label 4" row="1" col="1" backgroundColor="yellow"></Label>
</GridLayout>

The preceding code will produce the following layout:

Columns and rows can be either absolute numbers, auto, or *. A number indicates the width in pixels, auto makes it as wide as the widest child, and * takes up all the available space. rowSpan or colSpan gets or sets a value that indicates the total number of rows or columns that the child content spans within a GridLayout.

Now, let's look at how the stack layout works.