Grid list that wraps items

ionic-v1
#1

Just quick FYI if you’re using the grid to make a list of items (like thumbnails) and you have a layout like
`

One
Two
Three
Four
Five
Six
` Then only the first two will show and the rest will extend off the side of your app and not be visible. If you add the css` .gallery { -webkit-flex-wrap: wrap; flex-wrap: wrap; }`

then it will wrap your items to the next line and all your items will show and you’ll be a happy camper.

3 Likes
#2

Yeah i think you are using it wrong…

What you want is a responsive grid, which uses media queries by default (It depends on screen size how many items are shown in one row):

And another point. If you are using cols -> your div around should marked as “row” with class=“row”.
In your example ionic displays all columns in one row.

if you would do something like this:

<div class="row">
  <div class="col col-50">One</div>
  <div class="col col-50">Two</div>
</div>
<div class="row">
  <div class="col col-50">Three</div>
  <div class="col col-50">Four</div>
</div>

Greetz

#3

Right, I was simplifying my experience. My example came from a more complicated situation where I was using ng-repeat to populate a grid of images. I wanted a grid of two images per “row”.

I experimented with filters and put the ng-repeat on row using a filter to make a new row for every 2 images.

<div class="row" ng-repeat="row in gallery | filterByTwos">
    <div class="col col-50" ng-repeat="img in row">
        <img src="{{img.src}}">
    </div>
</div>

But the logic got complicated really quickly and added a bunch of extra unnecessary code. I ended up going with this in the end because it was all that was necessary and is much more performant than doing some heavy filtering on an array that will have 100s of items in it.

<div class="row gallery">
    <div class="col col-50" ng-repeat="img in gallery">
        <img src="{{img.src}}">
    </div>
</div>

and in css

.gallery {
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
}
12 Likes
#4

Thanks =D… Was very useful!

#5

Hi,
This code is only working in ios only. i need this code for android too, can u please help me

#6

The code above definitely works on Android, I’m using it in my app, I have an Android phone and it works. If you provide more details maybe we can all help. Maybe copy and paste your code into a codepen or a jsbin or something.

#7

I added img width: 100%. It worked in chrome. Otherwise, it split the image in half.

#8

Wow - just found out that iOS is still using the 2009 spec for Flex, meaning wrapping is not possible. :frowning:

Drat. But never mind, I managed to get around it by using display: inline-block on my div’s and setting min-width and min-height. Gave me the same results… :smile:

#9

Wow!! simply fantastic! Exactly wath I need!!! <3 <3

#10

flex is not supported for android 4.2, 4.3. I tried display: inline-block, it doesn’t work. Is there any solution? Thanks.

#11

Thanks a lot for this

#12

This is how I did it:

<div class="row" style="-webkit-flex-wrap: wrap; flex-wrap: wrap; justify-content: flex-start;">
    <div style="flex: 0 0 30%;" class="col col-30 text-center">
        One
    </div>
    <div style="flex: 0 0 30%;" class="col col-30 text-center">
        Two
    </div>
    ... (n columns)
</div>
  • col container is center aligned: text-center
  • flex items of col element are left aligned: justify-content: flex-start;
1 Like
#13

@mavlarnhi do u found any work around for this?

#14

This is a very old thread, but I found it while searching for a solution. I did find a solution, and wanted to add it for anyone else. This last update was October, which isn’t as old as the first post, so it seems people are still looking for this. Use ion-grid, and one ion-row. the ion-row add wrap to it. This will allow CSS to do the rows, instead of coding logic. If you want 2 items use width-50 on ion-col, in my example, I have 3 items per row, so I used width-33.

EDIT: I just realized this is tagged under Ionic, not Ionic2, but leaving solution for people doing a search anyway.

<ion-grid>
  <ion-row wrap>
    <ion-col width-33 *ngFor="let item of items">
       {{item}}
    </ion-col>
  </ion-row>
</ion-grid>
#15

Thank you so much :smile:
You help my problem !