Ionic组件之Grid

效果图：

直接上代码

grid.ts

import { Component } from '@angular/core';

@Component({
    templateUrl:'grid.html'
})
export class Grid{}

grid.html

<ion-header>
    <ion-navbar>
        <ion-title>Grid</ion-title>
    </ion-navbar>
</ion-header>
<ion-content class="grid-basic-page">
    <p>等宽</p>
    <ion-grid>
        <ion-row>
            <ion-col>
                <div>1 of 2</div>
            </ion-col>
            <ion-col>
                <div>1 of 2</div>
            </ion-col>
        </ion-row>
        <ion-row>
            <ion-col>
                <div>1 of 3</div>
            </ion-col>
            <ion-col col-6 col-sm-6 col-md-3 col-lg-2 col-xl-1>
                <div>1 of 3</div>
            </ion-col>
            <ion-col>
                <div>1 of 3</div>
            </ion-col>
        </ion-row>
        <ion-row>
            <ion-col>
                <div>1 of 3</div>
            </ion-col>
            <ion-col col-auto>
                <div>1 of 3</div>
            </ion-col>
            <ion-col>
                <div>1 of 3</div>
            </ion-col>
        </ion-row>
        <ion-row>
            <ion-col>
                <div>1 of 2</div>
            </ion-col>
            <ion-col offset-4>
                <div>2 of 2</div>
            </ion-col>
        </ion-row>
        <ion-row>
            <ion-col col-9 push-3>
                <div>1 of 2</div>
            </ion-col>
            <ion-col col-3 pull-9>
                <div>2 of 2</div>
            </ion-col>
        </ion-row>
        <ion-row align-items-start align-items-center align-items-end>
            <ion-col>
                <div>1 of 4</div>
            </ion-col>
            <ion-col>
                <div>1 of 4</div>
            </ion-col>
            <ion-col>
                <div>1 of 4</div>
            </ion-col>
            <ion-col>
                <div>1 of 4</div>
            </ion-col>
        </ion-row>
        <ion-row align-self-start align-self-center align-self-end>
            <ion-col>
                <div>1 of 4</div>
            </ion-col>
            <ion-col>
                <div>1 of 4</div>
            </ion-col>
            <ion-col>
                <div>1 of 4</div>
            </ion-col>
            <ion-col>
                <div>1 of 4</div>
            </ion-col>
        </ion-row>
        <ion-row justify-content-start jsutify-content-center justify-content-end justify-content-around justify-content-between>
            <ion-col>
                <div>1 of 4</div>
            </ion-col>
            <ion-col>
                <div>1 of 4</div>
            </ion-col>
            <ion-col>
                <div>1 of 4</div>
            </ion-col>
            <ion-col>
                <div>1 of 4</div>
            </ion-col>
        </ion-row>
    </ion-grid>
</ion-content>

grid.scss

.grid-basic-page {

  ion-col div {
    background-color: #f0f5ff;
    border: 1px solid #e6e9ee;
    border-radius: 2px;
    padding: 5px;
    text-align: center;
  }

  p {
    padding: 10px 0 0 10px !important;
    margin: 0;
  }

}