The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Is grid really supported to all browers?

  • This topic is empty.
Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
  • #263796

    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


    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.

Viewing 2 posts - 1 through 2 (of 2 total)
  • The forum ‘CSS’ is closed to new topics and replies.