Give help. Get help.

  • # December 13, 2017 at 8:29 am

    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

    # December 13, 2017 at 9:46 am

    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)

You must be logged in to reply to this topic.