NativeScript GridLayout Equal sized rows in entire screen

Question

Currently I am developing {N} app using Angular 2, I want to place 4 rows with equal height in the entire screen For example,

<GridLayout rows="*,*,*,*">
                        <StackLayout row="0"  backgroundColor="blue">
                            <Label text="row 0 "></Label>
                        </StackLayout>
                        <StackLayout row="1"  backgroundColor="red">
                            <Label text="row 1 with some large content and scrollable"></Label>
                        </StackLayout>
                        <StackLayout row="2"  backgroundColor="yellow">
                            <Label text="row 2 with some large content and scrollable"></Label>
                        </StackLayout>
                        <StackLayout row="3"  backgroundColor="green">
                            <Label text="row 3 with some large content and scrollable"></Label>
                        </StackLayout>
                    </GridLayout>

I want to be row1, row2 and row3 equal height in entire screen if the content is present or not.If content of the row is large and want to put that in ScrollView. In web(html) assume if entire page height is 1000, then I will give

row0 height="100" 
row1 height="300"
row2 height="300"
row3 height="300"

Can any one help me how to achieve this in {N}

Answer 1

Based on sample from this https://docs.nativescript.org/ui/layout-containers#sample-star-sizing

So your grid definition will be like this:

<GridLayout rows="*,3*,3*,3*">
    <!--Your content-->
<GridLayout>

It's like your grid contains 10 rows but they group based on number before * in rows definition