CSS Grid -ms-grid-row и столбец устанавливаются напротив фактического значения - PullRequest
Новая
       8

CSS Grid -ms-grid-row и столбец устанавливаются напротив фактического значения

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

У меня есть сетка, которая показывает очень странное поведение.Это похоже на ошибку, но попытка заставить CSS Grid работать в IE10 + 11 требует от вас очень четкого понимания всего синтаксиса.Так что я мог что-то здесь упустить. 

#main {
  -ms-grid-row: 3;
  -ms-grid-column: 1;
  grid-area: main;
  display: -ms-grid;
  display: grid;
      -ms-grid-rows: 1fr;
      grid-template-rows: 1fr;
      -ms-grid-columns: 15em 1fr;
      grid-template-columns: 15em 1fr;
      grid-template-areas: "sidebar" "content";
}

#main #sidebar {
  -ms-grid-row: 1;
  -ms-grid-column: 1;
  grid-area: sidebar;
  -ms-grid-column-span: 1;
  grid-column: 1 / 2;
  grid-row: 1;
  background: #f4f4f4;
  padding: 1em;
  height: calc(100vh - 145px);
}

#main #content {
  -ms-grid-row: 2;
  -ms-grid-column: 1;
  grid-area: content;
  -ms-grid-row-span: 1;
  grid-row: 1 / 2;
  -ms-grid-column-span: 1;
  grid-column: 2 / 3;
  padding: 1em;
  display: -ms-grid;
  display: grid;
  -ms-grid-rows: (minmax(min-content, max-content))[2] 1fr (minmax(min-content, max-content))[2];
      grid-template-rows: repeat(2, minmax(-webkit-min-content, -webkit-max-content)) 1fr repeat(2, minmax(-webkit-min-content, -webkit-max-content));
      grid-template-rows: repeat(2, minmax(min-content, max-content)) 1fr repeat(2, minmax(min-content, max-content));
  -ms-grid-columns: 2fr 1fr;
      grid-template-columns: 2fr 1fr;
}

Проблема, которую я получаю, связана с настройкой сетки #content div.Я устанавливаю grid-row: 1/2; и grid-column: 2/3;.Но, как вы можете видеть, autoprefixer устанавливает -ms-grid-row/column на совершенно противоположные значения.Поэтому я попытался обойти autoprefixer и вручную добавить синтаксис IE в мой окончательный файл CSS (я компилирую из SASS).Но я получаю точно такой же результат.

Есть ли какие-либо известные ошибки, о которых я не знаю?Это делает мою сетку бесполезной.Любая помощь очень ценится.

...