# CSS Grid Breaking On Mobile

**URL:** <https://community.weweb.io/t/css-grid-breaking-on-mobile/8774>\
**Category:** Ask us anything\
**Created:** [May 24, 2024, 6:49pm UTC](https://community.weweb.io/t/css-grid-breaking-on-mobile/8774 "2024-05-24T18:49:34Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![mark](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/mark/32/4163_2.png) [@mark](https://community.weweb.io/u/mark)\
**Post date:** [May 24, 2024, 6:49pm UTC](https://community.weweb.io/t/css-grid-breaking-on-mobile/8774/1 "2024-05-24T18:49:34Z")

</div>

Hi, I have a CSS Grid that looks great:  
In the editor on desktop & mobile  
In the browser on my desktop  
In the browser on my desktop in the inspector mobile view

The problem I have is that each grid item has extra height added when It on any browser (safari & Chrome) on a mobile device. I’ve tested on different devices as well so I’t snot device specific.

You can see in the second picture below how extra space is somehow added.

I’m hoping I’ve just missed a setting somewhere thats causing this and I’d be grateful for any help at all.

 ![Screenshot 2024-05-24 at 12.40.27 PM](https://us1.discourse-cdn.com/flex016/uploads/weweb/original/2X/1/18357de6314b592b9254713f716a838ea39e12e4.jpeg)

 ![IMG_59560ACFCE70-1](https://us1.discourse-cdn.com/flex016/uploads/weweb/original/2X/d/dcddf0ac1f0562a3f112950a10eeb7df8930839a.jpeg)

---

<div class="post-metadata">

**Author:** ![ericp](https://avatars.discourse-cdn.com/v4/letter/e/ea666f/32.png) [@ericp](https://community.weweb.io/u/ericp)\
**Post date:** [May 31, 2024, 1:14pm UTC](https://community.weweb.io/t/css-grid-breaking-on-mobile/8774/2 "2024-05-31T13:14:26Z")

</div>

Did you find a solution for this? Have the same problem.

---

<div class="post-metadata">

**Author:** ![jayjay13](https://avatars.discourse-cdn.com/v4/letter/j/9de053/32.png) [@jayjay13](https://community.weweb.io/u/jayjay13)\
**Post date:** [August 30, 2024, 7:21am UTC](https://community.weweb.io/t/css-grid-breaking-on-mobile/8774/3 "2024-08-30T07:21:35Z")

</div>

@mark & @ericp

i had the same issue and found the following solution to the problem:  
Safari has a weird bug that “mixing” flex box with grids can cause this big gap. which means the parent element of the cdd grid shouldn’t be a flex box. the solution is just to have a display:block as the parent of the actual grid itself. here are some screenshots from my tests on Browserstack:

**Initial stat of the grid:**

 ![Bildschirmfoto 2024-08-30 um 09.06.20](https://us1.discourse-cdn.com/flex016/uploads/weweb/original/2X/5/5117d8b9397d02a161fc130c7ca19321f4826dbd.jpeg)

**Initial state of the parent of the grid (flexbox that includes the heading)**

 ![Bildschirmfoto 2024-08-30 um 09.06.42](https://us1.discourse-cdn.com/flex016/uploads/weweb/original/2X/8/897de90c8d9cb4f295aff278de49332b071cc464.jpeg)

**Applying block to the parent (i know screenshot says grid but block is the better way):**

 ![Bildschirmfoto 2024-08-30 um 09.07.00](https://us1.discourse-cdn.com/flex016/uploads/weweb/original/2X/2/22c1179071a432f40fa35beebf33c287053437a9.jpeg)

---

<div class="post-metadata">

**Author:** ![ericp](https://avatars.discourse-cdn.com/v4/letter/e/ea666f/32.png) [@ericp](https://community.weweb.io/u/ericp)\
**Post date:** [August 30, 2024, 12:49pm UTC](https://community.weweb.io/t/css-grid-breaking-on-mobile/8774/4 "2024-08-30T12:49:01Z")

</div>

Thank you for showing your fix. I had ended up using fixed heights as my workaround, but this would work better.

What app/website is that for testing on iOS?