网格布局（display:grid）

实现下图这个效果如何操作？

如何实现这个效果？

最新在工作中遇到了要实现这样的效果案例，实现原理就是css的display:grid，特此记录一下

<div class="con">
    <div class="four" v-for="item in 1" :key="item"></div>
    <div class="two" v-for="item in 10" :key="item + Math.random()"></div>
</div>

.con{
  border: 10PX solid pink;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fill,calc(64PX + 25PX));
  grid-template-rows: repeat(auto-fill,calc(64PX + 25PX));
  grid-auto-flow: dense;
  justify-content: center;
  box-sizing: border-box;
  max-width: 1280PX;
  .four{
    grid-column: span 4;
    grid-row: span 2;
    width: calc(64PX*4 + 25PX*4);
    height: calc(64PX*2 + 25PX*2);
    padding: 0 calc(25PX/2) calc(25PX);
    position: relative;
    box-sizing: border-box;
    cursor: pointer;
    border: 1PX solid black;
  }

  .two {
    width: calc(64PX + 25PX);
    height: calc(64PX + 25PX);
    padding: 0 calc(25PX/2) calc(25PX);
    position: relative;
    box-sizing: border-box;
    cursor: pointer;
    border: 1PX solid pink;
  }
}

这里的css还可以在省略下，至于具体属性什么意思还是百度吧，百度比我说的明白，散会下班~