# Grid container weird behavior in android

**URL:** <https://forum.ionicframework.com/t/grid-container-weird-behavior-in-android/66932>\
**Category:** ionic-v1\
**Created:** [October 14, 2016, 10:39am UTC](https://forum.ionicframework.com/t/grid-container-weird-behavior-in-android/66932 "2016-10-14T10:39:43Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![reddy\_dhitendra](https://avatars.discourse-cdn.com/v4/letter/r/9fc29f/32.png) [@reddy\_dhitendra](https://forum.ionicframework.com/u/reddy_dhitendra)\
**Post date:** [October 14, 2016, 10:39am UTC](https://forum.ionicframework.com/t/grid-container-weird-behavior-in-android/66932/1 "2016-10-14T10:39:43Z")

</div>

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](http://codepen.io/anon/pen/qaKJQO?editors=0100)

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

 ![image](https://global.discourse-cdn.com/ionicframework/original/3X/c/8/c83338dabd59e5dbb4dbf87166130773ae9018c9.png)

**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

---

<div class="post-metadata">

**Author:** ![italo-nascimento](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/italo-nascimento/32/103691_2.png) [@italo-nascimento](https://forum.ionicframework.com/u/italo-nascimento)\
**Post date:** [October 14, 2016, 12:33pm UTC](https://forum.ionicframework.com/t/grid-container-weird-behavior-in-android/66932/2 "2016-10-14T12:33:11Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![reddy\_dhitendra](https://avatars.discourse-cdn.com/v4/letter/r/9fc29f/32.png) [@reddy\_dhitendra](https://forum.ionicframework.com/u/reddy_dhitendra)\
**Post date:** [October 14, 2016, 12:33pm UTC](https://forum.ionicframework.com/t/grid-container-weird-behavior-in-android/66932/3 "2016-10-14T12:33:53Z")

</div>

I tried that also but no luck ☹ @italo-nascimento

---

<div class="post-metadata">

**Author:** ![italo-nascimento](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/italo-nascimento/32/103691_2.png) [@italo-nascimento](https://forum.ionicframework.com/u/italo-nascimento)\
**Post date:** [October 14, 2016, 12:40pm UTC](https://forum.ionicframework.com/t/grid-container-weird-behavior-in-android/66932/4 "2016-10-14T12:40:38Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![italo-nascimento](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/italo-nascimento/32/103691_2.png) [@italo-nascimento](https://forum.ionicframework.com/u/italo-nascimento)\
**Post date:** [October 14, 2016, 12:55pm UTC](https://forum.ionicframework.com/t/grid-container-weird-behavior-in-android/66932/5 "2016-10-14T12:55:48Z")

</div>

Created an example using media queries. Take a look:

> **[Music Library Grid](https://codepen.io/italonascimento/pen/QKBrPG)**
>
> ...

---

<div class="post-metadata">

**Author:** ![reddy\_dhitendra](https://avatars.discourse-cdn.com/v4/letter/r/9fc29f/32.png) [@reddy\_dhitendra](https://forum.ionicframework.com/u/reddy_dhitendra)\
**Post date:** [October 14, 2016, 1:09pm UTC](https://forum.ionicframework.com/t/grid-container-weird-behavior-in-android/66932/6 "2016-10-14T13:09:49Z")

</div>

Thanks for replay its working fine now with few modifications 🙂