Ionic 5 responsive row on different devices

In Ionic 5, how can I make a responsive row in different devices?
I have a 3 rows and I want to fit the row height in the device. Like if I want to add more rows, the row height will automatically adjust just to fit on the screen.

    <ion-grid fixed="true">
      <ion-row>
        <ion-col class="text-header">
          Present your QR Code to gain more points to the store upon purchasing product
        </ion-col>
      </ion-row>
      <ion-row>
        <ion-col class="qr-code">
          this is the second row
        </ion-col>
      </ion-row>
      <ion-row>
        <ion-col class="text-footer">
          this is the third row
        </ion-col>
      </ion-row>
    </ion-grid>

Source: Angular Questions