'ionic 5 row alignment towards bottom

i have a below ion grid where there are 2 rows

<ion-grid>
<ion-row><ion-col class="ion-text-center">My page</ion-col></ion-row>
<ion-row><ion-col> <ion-item>
              <ion-label position="floating">FIRST_NAME</ion-label>
              <ion-input [(ngModel)]="card.firstName"></ion-input>
            </ion-item>
            <ion-item>
              <ion-label position="floating">LAST_NAME</ion-label>
              <ion-input [(ngModel)]="card.lastName"></ion-input>
          </ion-item>
</ion-col>
</ion-row>
</ion-grid>

As this is a small form so on large screens it is towards the top of the screen and not ideal. What i want is that the layout leaves empty space toward the top rather bottom.

i was trying with align-items-end etc. but could not get it working. how to do this alignment?

ionic-framework ionic5

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source

'ionic 5 row alignment towards bottom

Sources

Related Questions