Как редактировать grid-template-column для IE11

Question

Вот мой код:

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

Я пытаюсь заставить мою сетку работать на IE11.Я обнаружил, что repeat() не поддерживается, и я должен переписать его.Но я не мог найти способ переписать его, не зная конкретного количества повторов.Авторефиксатор не помог.

Возможно ли это вообще?

Answer 1

IE11 использует старую форму CSS Grid, поэтому вы не можете полагаться на современную CSS Grid, которую вы, возможно, уже знаете.Вы можете поиграть со старой сеткой, но это неприятно.

Обычно я использую @supports, что похоже на медиазапрос Modernizr для обнаружения функций.IE11 не понимает @supports или grid-gap, поэтому я могу выполнять обнаружение функций для новых браузеров, использующих @supports(grid-gap:0), и отправлять современные браузеры grid стилей, тогда как старые браузеры получают стили flex, которые они могут понять.

Пример метода:

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