How to right-align <IonGrid>?

Ionic Framework Ionic React
1

I built a grid for some navigation buttons on my phone like this:

<IonGrid>
  <IonRow>
    <IonCol>
      <IonButton>Next</IonButton>
    </IonCol>
    <IonCol>
      <IonButton>Previous</IonButton>
    </IonCol>
  </IonRow>
</IonGrid>

This works fine when I test on an iPhone.

On an iPad, though, the grid is way too spread out.

So what I want to do is set the IonGrid to a fixed size, which I did by changing it to <IonGrid fixed> and then setting the max size in variables.css:

/* https://ionicframework.com/docs/layout/grid#grid-width */
  /* Set all grid width maxes to 540px; */
  --ion-grid-width-md: 540px;
  --ion-grid-width-lg: 540px;
  --ion-grid-width-lg: 540px;
  --ion-grid-width-xl: 540px;

This shrinks the <IonGrid> to a good size on iPad, but it is in the middle of the screen. Now, I want to right align the <IonGrid> so that it is flush against the right end of the display.

I looked at the list of CSS utilities, but all the examples are for IonCol, and I want to align the <IonGrid> itself, not the individual columns.

How can I do that?