0

I'm using CSS grid for my layout, and testing it in Chrome and Firefox everything works great. I have a 4 column layout with both row- and column-gaps, which at certain media query breakpoints turns into 2 columns, and later 1 column. This works like a charm. I tried testing my page on my phone, and everything seems to work, except for my grid-gaps, which is just ignored completely, and there is no gap. Then i tried testing my page in Edge, and here it seems that not a single grid property is working. Not even the basic layout of it. Any ideas why this is? I thought grid was fully supported at this point?

Michael Benjamin
  • 346,931
  • 104
  • 581
  • 701
user2004478
  • 91
  • 1
  • 7
  • 1
    CSS Grid support is only available in the latest browser versions - http://caniuse.com/#feat=css-grid Depending on which phone/browser you are using it may be that it doesn't yet support grid, or you aren't adding vendor prefixes (-ms, -webkit, -moz). – D-Money Oct 03 '17 at 10:42

1 Answers1

0

Edge has issues itself, not all devices universally support. Edge probably still working around. Honestly making 100% fool proof with CSS very difficult for complicated layouts in real life.

You can look at this jQuery for flawless grid on almost all devices in case your need is immediate for production purpose. jQuery projects has a basic advantage that users can report bug, test develop.

Abhishek Ghosh
  • 1,161
  • 9
  • 19