ionic-framework/e2e/grid/basic/main.html

<ion-toolbar><ion-title>Grid</ion-title></ion-toolbar>

<ion-content class="grid-demo">
  <ion-row>
    <ion-col>
      <div>
        ion-col
      </div>
    </ion-col>
    <ion-col>
      <div>
        ion-col
      </div>
    </ion-col>
    <ion-col>
      <div>
        ion-col
      </div>
    </ion-col>
    <ion-col>
      <div>
        ion-col
      </div>
    </ion-col>
  </ion-row>

  <ion-row>
    <ion-col width-50>
      <div>
        ion-col[width-50]
      </div>
    </ion-col>
    <ion-col>
      <div>
        ion-col
      </div>
    </ion-col>
    <ion-col>
      <div>
        ion-col
      </div>
    </ion-col>
  </ion-row>

  <ion-row>
    <ion-col width-25>
      <div>
        ion-col[width-25]
      </div>
    </ion-col>
    <ion-col>
      <div>
        ion-col
      </div>
    </ion-col>
    <ion-col width-25>
      <div>
        ion-col[width-25]
      </div>
    </ion-col>
  </ion-row>

  <ion-row>
    <ion-col width-25>
      <div>
        ion-col[width-25]
      </div>
    </ion-col>
    <ion-col width-25 offset-25>
      <div>
        ion-col[width-25][offset-25]
      </div>
    </ion-col>
  </ion-row>

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

  <ion-row>
    <ion-col top>
      <div>
        ion-col[top]
      </div>
    </ion-col>
    <ion-col center>
      <div>
        ion-col[center]
      </div>
    </ion-col>
    <ion-col bottom>
      <div>
        ion-col[bottom]
      </div>
    </ion-col>
    <ion-col>
      <div>
        ion-col<br>#<br>#
      </div>
    </ion-col>
  </ion-row>

  <ion-row top>
    <ion-col>
      <div>
        [top] ion-col
      </div>
    </ion-col>
    <ion-col>
      <div>
        [top] ion-col
      </div>
    </ion-col>
    <ion-col bottom>
      <div>
        [top] ion-col[bottom]
      </div>
    </ion-col>
    <ion-col>
      <div>
        ion-col<br>#<br>#
      </div>
    </ion-col>
  </ion-row>

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

  <ion-row bottom>
    <ion-col>
      <div>
        [bottom] ion-col
      </div>
    </ion-col>
    <ion-col top>
      <div>
        [bottom] ion-col[top]
      </div>
    </ion-col>
    <ion-col>
      <div>
        [bottom] ion-col
      </div>
    </ion-col>
    <ion-col>
      <div>
        ion-col<br>#<br>#
      </div>
    </ion-col>
  </ion-row>

  <ion-row responsive-sm>
    <ion-col>
      <div>
        [responsive-sm] ion-col
      </div>
    </ion-col>
    <ion-col>
      <div>
        [responsive-sm] ion-col
      </div>
    </ion-col>
    <ion-col>
      <div>
        [responsive-sm] ion-col
      </div>
    </ion-col>
    <ion-col>
      <div>
        [responsive-sm] ion-col
      </div>
    </ion-col>
  </ion-row>

  <ion-row responsive-md>
    <ion-col>
      <div>
        [responsive-md] ion-col
      </div>
    </ion-col>
    <ion-col>
      <div>
        [responsive-md] ion-col
      </div>
    </ion-col>
    <ion-col>
      <div>
        [responsive-md] ion-col
      </div>
    </ion-col>
    <ion-col>
      <div>
        [responsive-md] ion-col
      </div>
    </ion-col>
  </ion-row>

  <ion-row responsive-lg>
    <ion-col width-50 offset-25>
      <div>
        [responsive-lg] ion-col[width-50][offset-25]
      </div>
    </ion-col>
    <ion-col width-25>
      <div>
        [responsive-lg] ion-col[width-25]
      </div>
    </ion-col>
  </ion-row>

</ion-content>

<style>
  .grid-demo ion-col div {
    background-color: #f7f7f7;
    border: 1px solid #ddd;
    padding: 10px 5px;
  }
</style>