CODEWITHSUNDEEP
javascriptangularionic-frameworkionic4
Diesel
Diesel

Reputation: 5345

Ionic 4, trying to show 2 per row with col-6, it still puts too many per row

After searching several stack overflow and other posts I figured the proper way to get two "Cards" or anything really (I've tried with just text or paragraphs or simpler things to card) to show per row was to repeat with a col-6 on the same row and it should wrap:

  <ion-grid>
      <ion-row>
        <ion-col col-6 *ngFor="let place of places">
          <ion-card>
            <ion-card-content>
              <ion-card-title>
                Card's Title
              </ion-card-title>
              <p>
                Card's description
              </p>
            </ion-card-content>
          </ion-card>
        </ion-col>
      </ion-row> 
  </ion-grid>

But this produces the result: enter image description here

Upvotes: 0

Views: 1685

Answers (1)

hectorob91
hectorob91

Reputation: 89

I think the reason is because ionic 4 not use col-size anymore. Instead you should try size="6" size-sm.

https://beta.ionicframework.com/docs/layout/grid#stacked-to-horizontal

Upvotes: 1

Related Questions