How to right-align <IonGrid>?

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


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:

/* */
  /* 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?