结论: 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布局
This is an about page 1 2 3 4 5.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)
This is an about page 1 2 3 4 5.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来代替，修改一下代码
This is an about page 1 2 3.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 代替~~~~