Grid container weird behavior in android


#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.

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

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: