結論: 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布局
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)
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來代替，修改一下**
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 代替~~~~
Grid布局方式
wp7中grid布局類似html中的 但是又不太一致 為了測試新乙個3行3列的grid 方了方便,剔除掉其它xaml c sharp collapse view plain copy layoutroot showgridlines true r1 r2 r3 c1 c2 c3 行分別命名為r1,r...
grid布局學習
今天工作清閒時刷到grid布局，之前一直沒有關注，趁現在進行記錄一下，該文件主要是對翻閱的資料進行整理歸納 實際需求中經常有迴圈展示資料的情況，以前一直用float，flex等方式，但如果在一些複雜的網頁結構中，grid要更加靈活。對於居中 特別是垂直居中 問題 還有元素的一維分布 一條線上如何分布...
grid布局小結
定義grid容器的方式 display grid 或者display inline grid 行內塊元素 容器屬性 舉例 container舉例 container舉例 舉例 container container containergrid template屬性是grid template col...