使用css伪类before／after实现 正方形三宫格、正方形六宫格、正方形九宫格

结构图解析：

后记

  
    
      12321
    
  




.test-box{
    display:flex;
    flex-direction: row;
    flex-wrap: wrap;
    .test-item{
      flex:0 0 33.33%;
      position: relative;
      &::before{
        content: ' ';
        display:block;
        padding-bottom:100%;
      }
      &:after{
        content: ' ';
        transform-origin: center;
        box-sizing: border-box;
        position: absolute;
        top:-50%;
        left:-50%;
        right:-50%;
        bottom:-50%;
        border-color: #c8c7cc;
        border-style: solid;
        border-width: 1px;
        -webkit-transform: scale(.5);
        -ms-transform: scale(.5);
        transform: scale(.5);
        border-top-width: 0;
        border-left-width: 0;
      }
    }
    .test-content{
      position:absolute;
      left:0;
      top:0;
      width:100%;
      height:100%;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
    }
}