结论: 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布局

.about {

width: 100%;

.grid {

background: #456;

display: grid;

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

grid-gap: 20px;

.item {

background: coral;

}

}

}

看一下效果

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

修改一下

.about {

width: 100%;

.grid {

background: #456;

display: grid;

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

grid-template-rows: auto auto;

grid-gap: 20px;

.item {

background: coral;

}

}

}

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

一个区域占多个单元格

页面要有美感层次感，一块区域总是会占一个或者几个单元格

我们简单的给一个区域占据2个单元格

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

.about {

width: 100%;

.grid {

background: #456;

display: grid;

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

grid-template-rows: auto auto;

grid-gap: 20px;

.item {

background: coral;

}

.large {

grid-column-start: 2;

grid-column-end: 4;

}

}

}

效果

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

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

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

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

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

.about {

width: 100%;

.grid {

background: #456;

display: grid;

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

grid-template-rows: auto auto;

grid-template-areas: "left- main main"

"left- single single";

grid-gap: 20px;

.item {

background: coral;

}

.left {

grid-area: left-;

}

.main {

grid-area: main;

}

.single {

grid-area: single;

}

// .large {

// grid-column-start: 2;

// grid-column-end: 4;

// }

}

}

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 代替~~~~