CODEWITHSUNDEEP
angularionic-frameworkionic2
dbenitez
dbenitez

Reputation: 3

Ionic2 grid columns

I'm trying to fit two items (two columns) in each row with ionic2, but it's not working.

  <ion-grid>
   <ion-row wrap>
    <ion-col width-50 *ngFor="let item of items">
        <div class="myCell">
        <div class="card">

        <div class="item item-body">
        <img class="full-image" src="...">
          <div class="item item-avatar">
            <img src="...">
          </div>
          <div style="font-size:3vw;margin:2vw">    {{item.name}}</div>
        </div>
        </div>
        </div>
      </ion-col>
   </ion-row>

I use this code but it still not working, someone knows something about this difficult topic?

Thanks

Upvotes: 0

Views: 805

Answers (2)

athulpraj
athulpraj

Reputation: 1577

   <ion-grid>
     <ion-row>
         <ion-col col-6 *ngFor="let item of items">
            <div class="myCell">
              <div class="card">
                 <div class="item item-body">
                   <img class="full-image" src="...">
                     <div class="item item-avatar">
                        <img src="...">
                     </div>
                     <div style="font-size:3vw;margin:2vw">    
                        {{item.name}}
                     </div>
                 </div>
              </div>
          </div>
       </ion-col>
     </ion-row>
   </ion-grid>

This should fix it

Upvotes: 0

malcoded
malcoded

Reputation: 56

Ionic uses a grid system, similar to bootstrap, that has 12 columns. So if you want your columns to take 50% of the width, they have to take the space of 6 columns each (since 100% is 12 columns).

Just change width-50 to col-6.

<ion-col col-6 *ngFor="let item of items">

Upvotes: 3

Related Questions