IE上的网格系统

时间:2018-01-02 14:26:51

标签: css

我想使用CSS Grid并使其在IE上工作,但我不知道为什么它不起作用。在Chrome上它看起来非常好。

这就是我的代码的样子:

.container {
  color: #fff;

  display: -ms-grid;
  display: grid;

  -ms-grid-columns: 1fr 1fr 1fr;
      grid-template-columns: repeat(3, 1fr);

  -ms-grid-gap: 10px 10px;
      grid-gap: 10px 10px;

  -ms-grid-template-areas: 
  "header header header"
  "aside main section"
  "footer footer footer";
      grid-template-areas: 
      "header header header"
      "aside main section"
      "footer footer footer";

}
.container > * {
  background-color: red;  
  padding: 30px;
}

header {
  -ms-grid-area: header;
      grid-area: header;
}
aside {
  -ms-grid-area: aside;
      grid-area: aside;
}
section {
  -ms-grid-area: section;
      grid-area: section;
}
main {
  -ms-grid-area: main;
      grid-area: main;
}
footer {
  -ms-grid-area: footer;
      grid-area: footer;
}

https://jsfiddle.net/erbnw6wm/1/

我找不到grid-gapgrid-template-areasgrid-areas的任何前缀。我只是在他们面前放了一个-ms-,但那可能是错的。

是否有解决方案,或者我必须等到IE支持它们?

0 个答案:

没有答案