I can’t seem to change the width of my columns inside my ion-item [ionic2]

Question

<ion-item-group *ngIf="tuesdayJson">
            <ion-item-divider class="" sticky> {{tuesdayJson.dayOfWeek}}
            </ion-item-divider>
              <ion-item class="transparency" *ngFor="let event of tuesdayJson.agendaEvents">
                <ion-row class="agenda-event-row {{event.rowType}}">

                  <ion-col width-25>
                    item 1
                  </ion-col>
                  <ion-col width-25>
                      item 2
                  </ion-col>
                  <ion-col width-25>
                      item 3
                  </ion-col>
                  <ion-col width-25>
                      item 4
                  </ion-col>

                </ion-row>
              </ion-item>
</ion-item-group>

This is my code. I expect that when I add a width value to my ion-col tag, I'd get a certain width. In this case I want four equal columns.

This is what I get:

Can someone please tell me what I am doing wrong? The column width thing works for me perfectly fine inside ion-content but not inside ion-item.

Answer 1

Since the last update to Ionic 3 they've changed the way we use the grid. There's no more width-x attribute for <ion-col>. They changed to 12 cols grid scheme (much like the one in Bootstrap).

So in this case your code needs to be like this:

<ion-row class="agenda-event-row {{event.rowType}}">
  <ion-col col-3>
    item 1
  </ion-col>
  <ion-col col-3>
    item 2
  </ion-col>
  <ion-col col-3>
    item 3
  </ion-col>
  <ion-col col-3>
    item 4
  </ion-col>
</ion-row>

If you need further explanation about the grid, screen sizes and everything else just see the Ionic 3 grid Docs.

Hope this helps :D