Table from grid to flex shows gaps

I have a grid table layout that had to convert to flex to support IE and can’t get rid of the spacing between elements.


Here is my site Read-Only: **https://preview.webflow.com/preview/virtual-campus-c7f300-87b055fcd83d67815?utm_medium=preview_link&utm_source=designer&utm_content=virtual-campus-c7f300-87b055fcd83d67815&preview=9cc1253eb0e0fad5771c232803e92728&pageId=5f7b83b1b2dcf23123036284&mode=preview

Hi Vilmarie,

I see your issue. It’s basically because you have started with a ‘Grid element’ instead of a standard Div element. If you would like to convert it over to a div, then use flex it will sort the issue.

I understand your thoughts on IE, however, this is a dying platform and shouldn’t be accommodated for unless the client has a large majority of users on the website using this software. For my sites, we have a message that pops up to instruct users to use, a modern browser if they happen to still use IE. Grid is awesome and shouldn’t be overlooked because less than 1% of people still use it. But that’s just my thoughts :slight_smile:

If you remove the grid element and place all the objects inside a div and flex it, it will get rid of your spacing issue! Hope that helps!

Best of luck,

Steve | 3SIX5 Digital

Thanks so much! Will try that.

Yes that worked! Yeah, it’s less than 1% of our traffic so I completely agree.

I’m glad to help Vilmarie!

Tag me in the future and maybe I can help out with any small issues you may have. I’ll try my best to respond.

100%… IE isn’t worth accommodating for these days!

Have fun!

Steve | 3SIX5 Digital

1 Like