Fixed column width not working using ionic 4

Question

I am using angular/ionic 4. I am trying to align heading and all other rows. Heading is not being aligned with checkboxes (confirmed, arrived, returned), each row of checkboxes are misaligned and the labels are not staying on a separate line:

<ion-content>
  <ion-grid>
    <div *ngFor="let customer of customers; let i=index">
      <ion-row *ngIf="customer.admin==true">
        <ion-col>
          <ion-card>
            <ion-card-content text-center text-align: center>
              <b>Shift:</b>&nbsp;{{customer.eventtime}}
            </ion-card-content>
          </ion-card>
        </ion-col>
      </ion-row>
      <ion-row *ngIf="customer.admin==true">
        <ion-col col-9></ion-col>
        <ion-col col-1>Confirmed</ion-col>
        <ion-col col-1>Arrived</ion-col>
        <ion-col col-1>Returned</ion-col>
      </ion-row>
      <ion-row>
        <ion-col col-9>
          <ion-label *ngIf="customer.admin==true">{{customer.description}}&nbsp;-&nbsp;admin</ion-label>
          <ion-label>{{customer.name}}&nbsp;-&nbsp;{{customer.cellphone}}</ion-label>
        </ion-col>
        <ion-col col-1>
          <ion-checkbox></ion-checkbox>  
        </ion-col>
        <ion-col col-1>
          <ion-checkbox></ion-checkbox>
        </ion-col>
        <ion-col col-1>
          <ion-checkbox></ion-checkbox>
        </ion-col>
      </ion-row>
    </div>
  </ion-grid>
</ion-content>

I searched for help on setting columns to be fixed but found no ionic 4 examples.

Answer 1

try this code,

 <ion-content>
  <ion-grid>
    <div *ngFor="let customer of customers; let i=index">
      <ion-row *ngIf="customer.admin==true">
        <ion-col>
          <ion-card>
            <ion-card-content text-center text-align: center>
              <b>Shift:</b>&nbsp;{{customer.eventtime}}
            </ion-card-content>
          </ion-card>
        </ion-col>
      </ion-row>
      <ion-row *ngIf="customer.admin==true">
        <ion-col size="9"></ion-col>
        <ion-col size="1">Confirmed</ion-col>
        <ion-col size="1">Arrived</ion-col>
        <ion-col size="1">Returned</ion-col>
      </ion-row>
      <ion-row>
        <ion-col size="9">
          <ion-label *ngIf="customer.admin==true">{{customer.description}}&nbsp;-&nbsp;admin</ion-label>
          <ion-label>{{customer.name}}&nbsp;-&nbsp;{{customer.cellphone}}</ion-label>
        </ion-col>
        <ion-col size="1">
          <ion-checkbox></ion-checkbox>  
        </ion-col>
        <ion-col size="1">
          <ion-checkbox></ion-checkbox>
        </ion-col>
        <ion-col size="1">
          <ion-checkbox></ion-checkbox>
        </ion-col>
      </ion-row>
    </div>
  </ion-grid>
</ion-content>