Dividing screen into multiple fragments for design home screen menus in nativescript angular

home.component.ts

import { Component, OnInit } from "@angular/core";
@Component({
selector: "Home",
moduleId: module.id,
templateUrl: "./home.component.html",
styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {
onButtonTap(): void {
console.log("Button was pressed");
}
constructor() {
}
ngOnInit(): void {
}
}

home.component.html

<ActionBar title="Home" class="action-bar">
</ActionBar>
<GridLayout height="90%" width="95%" rows="*,*" columns="*,*">
<StackLayout class="a" row="0" col="0">
<Button text="Button 1" (tap)="onButtonTap()"></Button>
</StackLayout>
<StackLayout class="b" row="0" col="1">
<Button text="Button 2" (tap)="onButtonTap()"></Button>
</StackLayout>
<StackLayout class="c" row="1" col="0">
<Button text="Button 3" (tap)="onButtonTap()"></Button>
</StackLayout>
<StackLayout class="d" row="1" col="1">
<Button text="Button 4" (tap)="onButtonTap()"></Button>
</StackLayout>
</GridLayout>

app.css

StackLayout > Button{
margin-top: 40%;
}
.a{
border-right-width: 1px;
border-right-color: black;
}
.b{
border-bottom-width: 1px;
border-bottom-color: black;
}
.c{
border-top-width: 1px;
border-top-color: black;
}
.d{
border-left-width: 1px;
border-left-color: black;
}

Actual Screen