grid tile layout .Cannot get it right - xamarin.forms

Question

I need to display a form in a tile layout.
I need to achieve the following:
I always find the grid challenging and some help would be nice
I did the following but as you can see the square are not the same size and label 6-9-12 are missing
Any help on how to adjust the grid to achieve as per pic above.
Code
<StackLayout Orientation="Vertical" HorizontalOptions="Center" VerticalOptions="Center">
<Grid >
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Label BackgroundColor="Lime" TextColor="White" Grid.Row="0" Grid.Column="0" Text="Label1" HeightRequest="100"/>
<Label BackgroundColor="Purple" TextColor="White" Grid.Row="0" Grid.Column="1" Text="Label2" HeightRequest="100"/>
<Label BackgroundColor="Aqua" TextColor="White" Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="2" Text="Label3" HeightRequest="100"/>
<Grid Grid.Row="2" Grid.Column="0">
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Label BackgroundColor="Red" TextColor="White" Grid.Row="0" Grid.Column="0" Text="Label4" HeightRequest="100"/>
<Label BackgroundColor="Blue" TextColor="White" Grid.Row="0" Grid.Column="1" Text="Label5" HeightRequest="100"/>
<Label BackgroundColor="Black" TextColor="White" Grid.Row="0" Grid.Column="2" Text="This is a long description blah blah...." HeightRequest="100"/>
<Label BackgroundColor="Green" TextColor="White" Grid.Row="1" Grid.Column="0" Text="Label7" HeightRequest="100"/>
<Label BackgroundColor="Yellow" TextColor="White" Grid.Row="1" Grid.Column="1" Text="Label8" HeightRequest="100"/>
<Label BackgroundColor="Gray" TextColor="White" Grid.Row="1" Grid.Column="2" Text="Label9" HeightRequest="100" />
<Label BackgroundColor="AntiqueWhite" TextColor="White" Grid.Row="2" Grid.Column="0" Text="Label10" HeightRequest="100"/>
<Label BackgroundColor="Coral" TextColor="White" Grid.Row="2" Grid.Column="1" Text="Label11"/>
<Label BackgroundColor="BlueViolet" TextColor="White" Grid.Row="2" Grid.Column="2" Text="Label12" HeightRequest="100"/>
<Label BackgroundColor="Cornsilk" TextColor="White" Grid.Row="3" Grid.Column="0" Text="Label13" HeightRequest="100"/>
<Label BackgroundColor="DarkOrange" TextColor="White" Grid.Row="3" Grid.Column="1" Grid.ColumnSpan="2" Text="Label14" HeightRequest="100"/>
</Grid>
</Grid>
</StackLayout>

Answer 1

You can get this layout with a single Grid, rather than a nested Grid. The Grid feature that makes this work is ColumnSpan. The reason you're seeing the uneven height is that the entire inner Grid is trying to get squeezed into the same vertical height as each of the rows above it (that's what Height="*" gets in the RowDefinition).
For this layout, a 6 column layout will work, with an appropriate ColumnSpan for each Label:
<Grid >
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Label BackgroundColor="Lime" TextColor="White" Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="3" Text="Label1" HeightRequest="100"/>
<Label BackgroundColor="Purple" TextColor="White" Grid.Row="0" Grid.Column="3" Grid.ColumnSpan="3" Text="Label2" HeightRequest="100"/>
<Label BackgroundColor="Aqua" TextColor="White" Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="6" Grid.ColumnSpan="2" Text="Label3" HeightRequest="100"/>
<Label BackgroundColor="Red" TextColor="White" Grid.Row="2" Grid.Column="0" Grid.ColumnSpan="2" Text="Label4" HeightRequest="100"/>
<Label BackgroundColor="Blue" TextColor="White" Grid.Row="2" Grid.Column="1" Grid.ColumnSpan="2" Text="Label5" HeightRequest="100"/>
<Label BackgroundColor="Black" TextColor="White" Grid.Row="2" Grid.Column="2" Grid.ColumnSpan="2" Text="This is a long description blah blah...." HeightRequest="100"/>
<Label BackgroundColor="Green" TextColor="White" Grid.Row="3" Grid.Column="0" Grid.ColumnSpan="2" Text="Label7" HeightRequest="100"/>
<Label BackgroundColor="Yellow" TextColor="White" Grid.Row="3" Grid.Column="2" Grid.ColumnSpan="2" Text="Label8" HeightRequest="100"/>
<Label BackgroundColor="Gray" TextColor="White" Grid.Row="3" Grid.Column="4" Grid.ColumnSpan="2" Text="Label9" HeightRequest="100" />
<Label BackgroundColor="AntiqueWhite" TextColor="White" Grid.Row="4" Grid.Column="0" Grid.ColumnSpan="2" Text="Label10" HeightRequest="100"/>
<Label BackgroundColor="Coral" TextColor="White" Grid.Row="4" Grid.Column="2" Grid.ColumnSpan="2" Text="Label11"/>
<Label BackgroundColor="BlueViolet" TextColor="White" Grid.Row="4" Grid.Column="4" Grid.ColumnSpan="2" Text="Label12" HeightRequest="100"/>
<Label BackgroundColor="Cornsilk" TextColor="White" Grid.Row="5" Grid.Column="0" Grid.ColumnSpan="2" Text="Label13" HeightRequest="100"/>
<Label BackgroundColor="DarkOrange" TextColor="White" Grid.Row="5" Grid.Column="2" Grid.ColumnSpan="4" Text="Label14" HeightRequest="100"/>
</Grid>
In your wireframe mockup, there appear to be spaces in between some rows. You can accomplish that by inserting fixed-size rows in the appropriate places, for instance maybe the third RowDefinition would be:
<RowDefinition Height="20" />
And of course modify all of the Grid.Row assignments for the Labels below it.
EDIT
Fixed Grid.Column settings on some of the labels.