Is grid really supported to all browers?

[Pranab]

Recently I making a website, where for featured section, I use grids. Chrome, Safari, Mozilla and opera showing perfect structure but in Edge, IE, the structure is completely broken like vertically one after one(also try with -ms- but not working at all). so, in my next project, should I use grid cause according to caniuse, grids are partially supported with -ms(for IE and Edge).Grid in caniuse So, need some guidance for that. OR just move into flexbox. in caniuse, flexbox support is like a green field. all browsers support flexbox.Flex in caniuse

[bclovis]

Long story short, I did a Sass mixin for grid with fallback and ie compatibility, and I wish I hadn’t. I think the issue your seeing in IE has to do with number of columns and column gap. IE doesn’t understand grid-column gap, so the work around is setting -ms-grid-columns to alternate the default col width with col-gap.

So ‘normal’ would read(eg)
grid-template-columns: 1fr 1fr 1fr;
grid-column-gap: 2%;

and IEs would read:
-ms-grid-columns: 1fr 2% 1fr 2% 1fr;

The mixin handles the math of that, creating the fall back and uses @supports not((display: -ms-grid) or (grid-column-gap: 1.7%)) to fall back to written flexbox styles.

[Author]

Posts