grid布局适配IE

结论: grid布局只能通过前缀支持IE>=10,而且并不能完全支持

环境

通过autoprefixer来自动添加前缀(现在应该没人手动加前缀了吧)
项目本身是通过vue-cli4 创建的(明明就是一个只有内部几个人使用的应用为什么要支持IE，chrome不香啊)

修改配置

package.json

"browserslist": [
    "> 1%",
    "last 2 versions",
    "not ie < 10"
  ]

可以自行在根目录创建一个postcss.config.js 或者直接在 vue.config.js中修改

vue.config.js

module.exports = {
  devServer: {
    port: 9001
  },
  css: {
    loaderOptions: {
      postcss: {
        // ..
        plugins: [
          require('autoprefixer')({
            grid: 'autoplace'
          })
        ]
      }
    }
  }
}

适配步骤

1.先写一个最简单常用的grid布局

看一下效果

IE11中直接糊成了一团

警告信息: grid-gap 必须同时在 grid-template-column 和 grid-template-rows 存在的情况下使用，当然我们可以试一试不要grid-gap

IE还是糊的，全挤在一起了

重点:grid-template-rows 和 grid-template-columns 必须要同时存在

 warning  in ./src/views/About.vue?vue&type=style&index=0&id=039c5b43&lang=less&scoped=true&

Module Warning (from ./node_modules/postcss-loader/src/index.js):
Warning

(7:3) Autoplacement does not work without grid-template-rows property

修改一下

看起来效果和chrome一样，但事实上我们使用grid布局的时候总是不会这么简单的使用(每一个区域都只占一个单元格)

一个区域占多个单元格

页面要有美感层次感，一块区域总是会占一个或者几个单元格
我们简单的给一个区域占据2个单元格

我们现在让第二个区域占据2个单元格(第一排后2个 2-4)

效果

IE11中并没有生效，而且样式发生了错乱

而且遗憾的是控制台也没提示我错误

当然看文档还是能找到解决办法的autoprefixer

If manual cell placement is required, we recommend using`grid-template`or`grid-template-areas`instead:

按推荐来我们用grid-template-areas来代替，修改一下代码

IE11中的效果表现也是一致的，问题应该解决了

但人类总会有好奇心，如果我们把区域设置成特殊形状会怎么样？
我们把main区域占据了3个单元格，这是一个不规则的区域

background: #456;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: auto auto;
    grid-template-areas: "left- main main"
                        "left- single main";
    grid-gap: 20px;
    .item {

现在chrome 和 IE11 都失效了，而且IE表现得好更有效一点(IE 扬眉吐气 虽然是五十步笑百步)
至于失效原因个人猜测是因为 区域命名会影响到网格线，而不规则的区域会让网格线错乱(然后百度并没有找到答案)

其余属性

align-items: center;

这个属性也会失效需要在每个item上使用 item-self: center 代替~~~~