```html
<template>
  <ion-grid>
    <ion-row>
      <ion-col>
        ion-col
      </ion-col>
      <ion-col>
        ion-col
      </ion-col>
      <ion-col>
        ion-col
      </ion-col>
      <ion-col>
        ion-col
      </ion-col>
    </ion-row>

    <ion-row>
      <ion-col size="6">
        ion-col [size="6"]
      </ion-col>
      <ion-col>
        ion-col
      </ion-col>
      <ion-col>
        ion-col
      </ion-col>
    </ion-row>

    <ion-row>
      <ion-col size="3">
        ion-col [size="3"]
      </ion-col>
      <ion-col>
        ion-col
      </ion-col>
      <ion-col size="3">
        ion-col [size="3"]
      </ion-col>
    </ion-row>

    <ion-row>
      <ion-col size="3">
        ion-col [size="3"]
      </ion-col>
      <ion-col size="3" offset="3">
        ion-col [size="3"] [offset="3"]
      </ion-col>
    </ion-row>

    <ion-row>
      <ion-col>
        ion-col
      </ion-col>
      <ion-col>
        ion-col
        <br>#
      </ion-col>
      <ion-col>
        ion-col
        <br>#
        <br>#
      </ion-col>
      <ion-col>
        ion-col
        <br>#
        <br>#
        <br>#
      </ion-col>
    </ion-row>

    <ion-row>
      <ion-col align-self-start>
        ion-col [start]
      </ion-col>
      <ion-col align-self-center>
        ion-col [center]
      </ion-col>
      <ion-col align-self-end>
        ion-col [end]
      </ion-col>
      <ion-col>
        ion-col
        <br>#
        <br>#
      </ion-col>
    </ion-row>

    <ion-row align-items-start>
      <ion-col>
        [start] ion-col
      </ion-col>
      <ion-col>
        [start] ion-col
      </ion-col>
      <ion-col align-self-end>
        [start] ion-col [end]
      </ion-col>
      <ion-col>
        ion-col
        <br>#
        <br>#
      </ion-col>
    </ion-row>

    <ion-row align-items-center>
      <ion-col>
        [center] ion-col
      </ion-col>
      <ion-col>
        [center] ion-col
      </ion-col>
      <ion-col>
        [center] ion-col
      </ion-col>
      <ion-col>
        ion-col
        <br>#
        <br>#
      </ion-col>
    </ion-row>

    <ion-row align-items-end>
      <ion-col>
        [end] ion-col
      </ion-col>
      <ion-col align-self-start>
        [end] ion-col [start]
      </ion-col>
      <ion-col>
        [end] ion-col
      </ion-col>
      <ion-col>
        ion-col
        <br>#
        <br>#
      </ion-col>
    </ion-row>

    <ion-row>
      <ion-col size="12" size-sm>
        ion-col [size="12"] [size-sm]
      </ion-col>
      <ion-col size="12" size-sm>
        ion-col [size="12"] [size-sm]
      </ion-col>
      <ion-col size="12" size-sm>
        ion-col [size="12"] [size-sm]
      </ion-col>
      <ion-col size="12" size-sm>
        ion-col [size="12"] [size-sm]
      </ion-col>
    </ion-row>

    <ion-row>
      <ion-col size="12" size-md>
        ion-col [size="12"] [size-md]
      </ion-col>
      <ion-col size="12" size-md>
        ion-col [size="12"] [size-md]
      </ion-col>
      <ion-col size="12" size-md>
        ion-col [size="12"] [size-md]
      </ion-col>
      <ion-col size="12" size-md>
        ion-col [size="12"] [size-md]
      </ion-col>
    </ion-row>

    <ion-row>
      <ion-col size="6" size-lg offset="3">
        ion-col [size="6"] [size-lg] [offset="3"]
      </ion-col>
      <ion-col size="3" size-lg>
        ion-col [size="3"] [size-lg]
      </ion-col>
    </ion-row>
  </ion-grid>
</template>
```