I can't seem to change the width of my columns inside my ion-item

Ionic Framework ionic-v3
1 
  <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 want four equal columns.

This is what I get:

image
Screen Shot 2017-05-10 at 2.55.52 PM.png807×275 106 KB

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

2 
<ion-grid>
  <ion-row>
    <ion-col>
      1 of 3
    </ion-col>
    <ion-col col-8>
      2 of 3 (wider)
    </ion-col>
    <ion-col>
      3 of 3
    </ion-col>
  </ion-row>
  <ion-row>
    <ion-col>
      1 of 3
    </ion-col>
    <ion-col col-6>
      2 of 3 (wider)
    </ion-col>
    <ion-col>
      3 of 3
    </ion-col>
  </ion-row>
</ion-grid>

Here is the solution https://ionicframework.com/docs/api/components/grid/Grid/

3

I also didn’t realize we were on ionic version 3 not 2…

4

Add the following code to your already existing tag - Works for Ionic 4

 <ion-col size="8"></ion-col>
 <ion-col size="2"></ion-col>
 <ion-col size="2"></ion-col>

The total columns amount to 12.

Therefore by set the sizes to add up to 12.