How to edit grid-template-columns for IE11

Question

Here is my code:

grid-template-columns: repeat(auto-fill,minmax(120px, 1fr));

I am trying to make my grid layout work on IE11. I found that repeat() is not supported and I should rewrite it. But I could not find any way to rewrite it without knowing the specific number of repeats. Autoprefixer did not help.

Is this even possible?

Answer 1

IE11 uses an older form of CSS Grid, so you can't rely on the modern CSS Grid you might already know. You can fiddle with the old grid but it's a pain.

What I typically do is use @supports, which is kinda like a Modernizr media query for feature detection. IE11 doesn't understand @supports or grid-gap, so I can do feature detection for newer browsers using @supports(grid-gap:0) and send modern browsers grid styles, whereas older browsers get flex styles which they can understand.

Example of the method:

/** 
 * IE 11 and older Edge will just get a flex layout
 * Whereas everyone else gets the CSS grid layout
 * We're using @supports for modern browser, which override the flexbox styles
 */

.random-class {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: center;

  @media (min-width: $sm) {
    flex-direction: row;
  }
}

.random-class-2 {
  margin: 3%;
  width: 94%;

  @media (min-width: $sm) and (max-width: $lg) {
    margin: 2%;
    width: 46%;
  }

  @media (min-width: $lg) {
    margin: 1%;
    width: 31.3%;
  }
}

// New browsers will get CSS grid
// IE11 doesn't understand grid-gap, so this works
@supports (grid-gap: 0) {
  .random-class {
    display: grid;
    grid-template-columns: 1fr;
    grid-gap: 35px;
    margin: 0;
    width: 100%;

    @media (min-width: $sm) and (max-width: $lg) {
      grid-template-columns: 1fr 1fr;
    }

    @media (min-width: $lg) {
      grid-gap: 25px;
      grid-template-columns: 1fr 1fr 1fr;
    }
  }

  // Overrides flexbox width settings above
  .random-class-2 {
    margin: 0;
    width: 100%;
  }
}