Grid container weird behavior in android

ionic-v1
1

I’m trying to implement List/Grid layout.
Everything is fine in chrome browser check this codepen, click on right corner button to switch List/Grid layout.

http://codepen.io/anon/pen/qaKJQO?editors=0100

When I tried to implement same on android emulator, the out put is like this

image
1.png1080×1920 172 KB

Note*: List is working fine in android emulator. But grid view is not working as expected

don’t know what went wrong

please help me
Thanks in advance

2

I had the same issue in Android and was able to solve it by adding display: inline-block to the grid items.

3

I tried that also but no luck :frowning: @italo-nascimento

4

Shoud work if you set the elements width. Here’s what I did:

.grid{
  display: flex;
  flex-wrap: wrap;
}
.grid-item{
  width: 33.33%;
  display: inline-block;
  box-sizing: border-box; /* so I can set padding without braking the grid line */
}

I also used media queries to change the number of columns for bigger screens.

5

Created an example using media queries. Take a look:

6

Thanks for replay its working fine now with few modifications :slight_smile: