Grid布局的两种写法

如果你对grid布局不熟悉，请先学习www.ruanyifeng.com/blog/2019/0…

实现目标

html布局

<div class="grid-box">
    <div class="grid-item">1</div>
    <div class="grid-item">2</div>
    <div class="grid-item">3</div>
    <div class="grid-item">4</div>
    <div class="grid-item">5</div>
    <div class="grid-item">6</div>
    <div class="grid-item">7</div>
    <div class="grid-item">8</div>
</div>

CSS代码

写法一

优点	缺点
兼容性最好，支持IE10及以上版本（需要借助autoprefix帮助添加浏览器前缀及语法转化）	写法麻烦

下方grid-template是grid-template-areas,grid-template-rows和grid-template-columns的简写形式，即和注释部分是等价的

.grid-box {
    display: grid;
    grid-template:
        "item1 item2 item3" 1fr
        "item1 item4 item5" 1fr
        "item6 item7 item8" 1fr /
        1fr 1fr 1fr;
   // grid-template-areas:
   //    "item1 item2 item3"
   //     "item1 item4 item5"
   //     "item6 item7 item8";
   // grid-template-columns: repeat(3, 1fr);
   // grid-template-rows: repeat(3, 1fr);
   grid-gap: 10px;
    
   width: 100vw;
   height: 100vh;
    
   background-color: #ccc;
   }
   
.grid-item {
    background-color: yellow;
}
.grid-item:nth-child(1) {
    grid-area: item1;
}
.grid-item:nth-child(2) {
    grid-area: item2;
}
.grid-item:nth-child(3) {
    grid-area: item3;
}
.grid-item:nth-child(4) {
    grid-area: item4;
}
.grid-item:nth-child(5) {
    grid-area: item5;
}
.grid-item:nth-child(6) {
   grid-area: item6;
}
.grid-item:nth-child(7) {
    grid-area: item7;
}
.grid-item:nth-child(8) {
    grid-area: item8;
}
    

写法二

优点	缺点
写法简洁	兼容性较差，在IE10，11浏览器中，不支持单元格合并

IE中，.grid-item不能使用a标签，否则不起作用

.grid-box {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   grid-template-rows: repeat(3, 1fr);
   grid-gap: 10px;
    
   width: 100vw;
   height: 100vh;
    
   background-color: #ccc;
   }
.grid-item {
    background-color: yellow;
    }
.grid-item:nth-child(1) {
    grid-column: 1/2; //声明该单元格纵列从第1条网格线到到第2条网格线
    grid-row: 1/3; //声明该单元格横列从第1条网格线到到第3条网格线
    }
   

Autoprefix兼容

在线转换

• 访问网址：autoprefixer.github.io/
• 在左侧输入框粘贴你要转换的css代码
• 在Browserslist输入框中写入ie >=10，点击applay

vuecli生成的项目转换，有两种方式

• 直接在组件的style标签最上方写入/* autoprefixer grid: autoplace */,autoprefix就会对grid进行转换，因为默认是不转换grid的

<style>
/* autoprefixer grid: autoplace */
    .grid-box {
        display: grid;
        ...
    }
</style>

• 在vue.config.js中进行配置，下面列出配置项

module.exports = {
  css: {
    loaderOptions: {
      postcss: {
        plugins: [
          require('autoprefixer')({
            grid: 'autoplace'
          })
        ]
      }
    }
  }
};