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


#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:

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…