Forums

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? Reply To: Is grid really supported to all browers?

#263797
bclovis
Participant

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.