How to create 2 x 2 grid using NativeScript GridLayout - css

Question

The Problem
I am trying to simply display images in 2 rows, 2 columns - equally centered all around.
I have tried all sorts of Layouts. Here are a couple of my failures:
My Ideal Layout
My XML
<Page loaded="pageLoaded" class="page"
xmlns="http://www.nativescript.org/tns.xsd">
<ActionBar class="action-bar customActionBar" >
<!--
Use the NavigationButton as a side-drawer button in Android
because ActionItems are shown on the right side of the ActionBar
-->
<NavigationButton ios:visibility="collapsed" icon="res://menu" tap="onDrawerButtonTap"></NavigationButton>
<!--
Use the ActionItem for IOS with position set to left. Using the
NavigationButton as a side-drawer button in iOS is not possible,
because its function is to always navigate back in the application.
-->
<ActionItem icon="res://navigation/menu"
android:visibility="collapsed"
tap="onDrawerButtonTap"
ios.position="left"></ActionItem>
<Label class="action-bar-title" text="Signup"></Label>
</ActionBar>
<DockLayout width="100%" height="100%" backgroundColor="lightgray" class="page-gradient"
stretchLastChild="false">
<Button class="submitButton h2 border" text="Next" height="60" dock="bottom"
tap="onSignupButtonTap" returnKeyType="next"/>
<!-- content -->
<StackLayout dock="top" width="100%" height="75" >
<!-- ><Label horizontalAlignment="center" text="Graphic - Step 1 thru 3 Here" />
-->
<Image class="" src="~/images/signup/step-1-on.png" stretch="fill" />
<Image style="margin-top: 15" src="~/images/signup/progress.png" stretch="fill" />
</StackLayout>
<WrapLayout orientation="horizontal" width="210" height="210" backgroundColor="lightgray">
<Label text="Label 1" width="70" height="70" backgroundColor="red"/>
<Label text="Label 2" width="70" height="70" backgroundColor="green"/>
<Label text="Label 3" width="70" height="70" backgroundColor="blue"/>
<Label text="Label 4" width="70" height="70" backgroundColor="yellow"/>
</WrapLayout>
<!-- end content -->
</DockLayout>
</Page>
Can you help me with this layout? It appears to be easy, but not for me.
Thank You.

Answer 1

Created a playground here.
GridLayout is the king.
<GridLayout columns="*, *" rows="*, *" width="230" height="230"
backgroundColor="lightgray">
<Label text="Label 1" row="0" col="0" backgroundColor="red" />
<Label text="Label 2" row="0" col="1" backgroundColor="green" />
<Label text="Label 3" row="1" col="0" backgroundColor="blue" />
<Label text="Label 4" row="1" col="1" backgroundColor="yellow" />
<Label text="Label 5" row="1" col="2" backgroundColor="orange" />
</GridLayout>