IonGrid + CSS Utilities

Ionic Framework Ionic React
1

I’m currently trying out the Ionic Grid Component in React and having some issues with the CSS Utilities.
Classes like: “ion-align-self-start” or “ion-justify-content-center” don’t work at all.

The only CSS Util that works in IonGrid is: “ion-text-*”

Not even the example code in the docs works.

For example:

  return (
    <IonPage>
      <IonHeader>
        <IonToolbar>
          <IonButtons slot="start">
            <IonBackButton defaultHref="/" />
          </IonButtons>
        </IonToolbar>
      </IonHeader>
      <IonContent>
        <IonGrid>
          <IonRow>
            <IonCol className="ion-text-start">ion-col start</IonCol>
            <IonCol className="ion-text-center">ion-col center</IonCol>
            <IonCol className="ion-text-end">ion-col end</IonCol>
            <IonCol>
              ion-col
              <br />#
              <br />#
            </IonCol>
          </IonRow>
        </IonGrid>
      </IonContent>
    </IonPage>
   )