CODEWITHSUNDEEP
htmlcsscss-grid
Matěj Chumlen
Matěj Chumlen

Reputation: 37

How to edit grid-template-columns for IE11

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?

Upvotes: 1

Views: 3337

Answers (1)

serraosays
serraosays

Reputation: 7869

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%;
  }
}

Upvotes: 1

Related Questions