Как переписать объявление CSS Grid с областями сетки для IE11 - PullRequest
Новая
       43

Как переписать объявление CSS Grid с областями сетки для IE11

0 голосов
/ 25 сентября 2018

У меня есть удобный компонент Container, который определяет сетку, охватывающую всех дочерних элементов в среднем столбце, которая служит контейнером максимальной ширины.У этого компонента есть возможность указать дочерний элемент, чтобы разбить этот контейнер максимальной ширины и начать с первого столбца и закончить в последнем столбце.

См. Этот пост в блоге для дальнейшего объяснения: https://cloudfour.com/thinks/breaking-out-with-css-grid-layout/

См. Этот Codepen, например: https://codepen.io/tylersticka/full/wdmymG/

Я был уверен, что это старые IE 10 и IEСпецификация 11 будет иметь свойства для покрытия свойств более новой спецификации, но мне не повезло при тестировании в IE 11. Какой синтаксис мне не хватает или мне нужно изменить для репликации областей сетки в IE 11? 

.grid-container {
  display: -ms-grid;
  display: grid;

  -ms-grid-columns: [full-start] minmax(0, 1fr) [main-start] minmax(0, 1120px) [main-end] minmax(0, 1fr)
[full-end];

  grid-template-columns:
    [full-start] minmax(0, 1fr) [main-start] minmax(0, 1120px) [main-end] minmax(0, 1fr) [full-end];

  > * {
    grid-column: main;
    padding: 0 16px;
  }
}

.full-width {
  grid-column: full;
}

Источники:

https://css -tricks.com / css-grid-in-ie-debunking-common-ie-grid-misconceptions /

https://css -tricks.com / css-grid-in-ie-css-grid-and-the-new-autoprefixer /

https://autoprefixer.github.io/

...