Ionic2 grid example?

Ionic Framework ionic-v3
1

using the ionic example and it doesnt appear to be working in ionic2… am I missing something simple?

2

Ionic 2 grid system works like this:

<ion-row>
  <ion-col width-50></ion-col>
  <ion-col width-50></ion-col>
<ion-row>
2 Likes
3

@aaronksaunders I’m using the grid component right now and it seems to be working ok. I just followed the docs here and it seems to work ok - maybe you’re doing something more complicated?

4

i got it working, but seeing different results in chrome and safari… and i really cannot get the layout working properly using a grid, will have to manually lay it out.

image

5

Have you been able to get the grid system to work like an image gallery??

6

any chance for a masonry example with ionic grids? For pinterest type layouts

7

image

This Above Image is table created in Ionic 1 using row and col 25.

now I can’t achieve this ionic 2. I am using grid and my output is something like this-

image

here goes my code -

<ion-grid>

        <ion-row wrap *ngFor="let res of ResArray">

          <ion-col width-25> {{ res.fullname }}</ion-col>
          <ion-col width-25> {{ res.email }}</ion-col>
          <ion-col width-25> {{ res.tel }}</ion-col>
          <ion-col width-25> <button ion-button small color="danger" (click)="gotoDetails(res)"> Details</button></ion-col>
        </ion-row>
      </ion-grid>
8

change this

<ion-row>
  <ion-col width-50></ion-col>
  <ion-col width-50></ion-col>
<ion-row>

to this

<ion-row>
  <ion-col col-6></ion-col>
  <ion-col col-6></ion-col>
<ion-row>

They reworked the grid system: https://ionicframework.com/docs/components/#grid

1 Like
9

Thanks @LoLStats, still getting same output.

the mailid I am printing is bit long and it’s getting wrapped in col-25.

  <ion-grid>

        <ion-row wrap *ngFor="let res of ResArray">

          <ion-col col-25> {{ res.fullname }}</ion-col>
          <ion-col col-25> {{ res.email }}</ion-col>
          <ion-col col-25> {{ res.tel }}</ion-col>
          <ion-col col-25> <button ion-button small color="danger" (click)="gotoDetails(res)"> Details</button></ion-col>
        </ion-row>
      </ion-grid>
10

It should be col-3 instead of col-25. It’s based on a 12 column default now.

1 Like
11

Yes I forgot to edit my example

1 Like
12

thanks @EvanW . image

just have a look at the output. don’t know what I am missing or is there bug ?

13

Well your text is too much to fit without text-wrap. Try adding the text-wrap attribute but it will make some text take up two lines.

Also, read the docs and mess with padding so that the text can go closer to the edges of a box and that may help.

1 Like
14

Thanks @EvanW, Thanks @LoLStats :+1:

I got soluation. I must tell u.
I was using ion-grid inside ion-item tag due to this Ion-grid is now working.
just commented this and got solved. Thanks again :+1:

image

2 Likes