Handle our layout with Ionic grid

Ionic gives us a grid system for us to use with our components. With it, we don’t have to worry about importing a grid system from somewhere else or build your own (although it is an option if you choose).

Inside your Ionic Page’s IonContent tag, you want to have an IonGrid component with rows defined inside of it.

<IonGrid>
  <IonRow>
    <IonCol>ion-col</IonCol>
    <IonCol>ion-col</IonCol>
  </IonRow>
</IonGrid>

Here we’ve defined a grid that has a row with two columns inside of it.

We can also define column width. Ionic’s rows have a total column length of 12, and the columns inside our row can add up to that height

<IonGrid>
  <IonRow>
    <IonCol size="4">ion-col</IonCol>
    <IonCol size="8">>ion-col</IonCol>
  </IonRow>
</IonGrid>

Here the first column is 4/12’ths the width of the row and the second column take’s up 8/12th’s of the row.

For our Todo app, we can wrap our todo items in a row. For now we can just have our Todo Items wrapped in a column of size 12, which would be the whole column. This would allow us some flexibility if we want to add another component beside it.

<IonGrid>
  <IonRow>
    <IonCol size="12">
      <IonItem>
        <IonText>This is a todo item</IonText>
      </IonItem>
    </IonCol>
  </IonRow>
</IonGrid>

We don’t have to stop there, we could also add a IonGrid inside our IonItem. Our Todo item could have its own IonGrid inside it. In it, we could have a Grid with a Row containing a column with a piece of text and a button

<IonGrid>
  <IonRow>
    <IonCol size="12">
      <IonItem>
        <IonGrid>
          <IonRow>
            <IonCol size="8" class="ion-align-self-center">
              <IonText>I am a todo item</IonText>
            </IonCol>
            <IonCol size="4">
              <IonButton>Delete</IonButton>
            </IonCol>
          </IonRow>
        </IonGrid>
      </IonItem>
    </IonCol>
  </IonRow>
</IonGrid>

Moving the delete button to the right of its column

You might notice in the Ionic documentation here it states that we should use ion-align-items-end and ion-justify-content-end. However for centering buttons, you should use the class ion-text-right

<IonCol size="4" class="ion-text-center">
  <IonButton>Delete</IonButton>
</IonCol>

How to handle multiple screen sizes on Ionic Grid

Desktop

Ionic allows us to write applications that run on multiple screen sizes.

We might want our column sizes to be different depending on

Lets change how much space our columns take up on desktop using the size-lg property.

For the column containing our Text, lets set it to be a size of 11 on desktop

<IonCol size="8" size-lg="11" class="ion-align-self-center">

We want to adjust the size of our columns add up to a size of 12, so we also want to adjust the Ion Button to be a size of 2 instead of 4 on desktop

<IonCol size="4" size-lg="1" class="ion-text-center">
   <IonButton>Delete</IonButton>
</IonCol>

Tablet

We can also adjust columns in our Ionic grid to handle tablet size using the size-md property

 <IonCol size="8" size-md="10" size-lg="11" class="ion-align-self-center">
   <IonText>I am a todo item</IonText>
</IonCol>

 <IonCol size="4" size-md="2" size-lg="1" class="ion-text-center">
   <IonButton>Delete</IonButton>
</IonCol>

Mobile

Since we have size-md and size-lg defined already, mobile would take on the values of the size property alone, but we can also have it use the size-sm property if we want to explicitly have our columns adjust to smaller sizes. If you find that your device isn’t taking on the values of the size-sm property, theres also a size-xs property as well

<IonCol size-xs="9" size-sm="9" size-md="10" size-lg="11" class="ion-align-self-center">
  <IonText>I am a todo item</IonText>
</IonCol>

<IonCol size-xs="3" size-sm="3" size-md="2" size-lg="1" class="ion-text-right">
    <IonButton>Delete</IonButton>
</IonCol>

Using decimal ( float / double ) values for Ionic Column sizes

We can get more granular with our column sizes by using decimals

<IonCol size-xs="8.5" size-sm="8.5" size-md="10" size-lg="11"  class="ion-align-self-center">
  <IonText>{todoItem.title}</IonText>
</IonCol>

<IonCol size-xs="3.5" size-sm="3.5" size-md="2" size-lg="1" class="ion-text-right">
    <IonButton onClick={() => deleteTodo(index)}>Delete</IonButton>
</IonCol>