How to use ion-grid for full screen google map with buttons & labels on top?

Ionic Framework ionic-v3
1

I’m trying to code an Ionic 3 app with full screen cordova google maps with buttons and labels on top. For that I would like to use ion-grid for making the layout responsive and simpler to code. Even though I use flex:n; the labels are getting stacked one below the other without space in between. I’ve made a git repo for the sample code. It can be found here:

My question is how to write the template (home.html) so that the buttons and labels are positioned where I want them to be (that is spaced apart on an 8x12 grid) using ion-grid.

Thanks a lot!

2

Here’s my home.html file:

<ion-content class="home">
  <ion-grid>
    <div #map id="map" style="height:100%;">
      <ion-row style="flex:1;">
        <button ion-button icon-only (click)="openMenu()">
          <ion-icon name="menu">
          </ion-icon>
        </button>
      </ion-row>
      <ion-row style="flex:1;">
        <ion-col col-1>
        </ion-col>
        <ion-col col-8>
          <ion-item>
            <ion-label (click)="onStartLocation()">Start Location</ion-label>
          </ion-item>
        </ion-col>
      </ion-row>
      <ion-row style="flex:4;">
      </ion-row>
      <ion-row style="flex:1;">
        <ion-col col-5>
        </ion-col>
        <ion-col>
          <ion-item>
            <ion-label (click)="onEndLocation()">End Location</ion-label>
          </ion-item>
        </ion-col>
      </ion-row>
      <ion-row style="flex:1;">
      </ion-row>
    </div>
  </ion-grid>
</ion-content>

May I know what’s wrong with this template file, which generates labels on the map out of alignment?