移动端常见九宫格布局

 

      

        

          
标题一
        
        

          
标题二
        
        

          
标题三
        
        

          
标题四
        
        

          
标题五
        
        

          
标题六
        
        

          
标题七
        
      
    

 

css样式

值得注意的是 transform: scaleX(0.6);这样用是因为1px在移动端手机会显得比较粗，所以做了0.6缩放。

cf 类名为 清除浮动的缩写，使用时需要把清除浮动代码加上。

    .grid{
    background:#fff;
    font-size:0.42rem;
    color:#333;
    .item{
      .liItem{
        float: left;
        width: 33.3333%;
        background: #fff;
        padding: .49rem 0;
        box-sizing: border-box;
        font-size: 0.42rem;
        color: #111;
        position: relative;
        // 3倍数的li没有右border
        &:not(:nth-child(3n))::before{
          content: '';
          position: absolute;
          width: 1px;
          height: 100%;
          top: -1px;
          right: 0;
          border-right: 1px solid rgba(232,232,232,0.8);
          transform: scaleX(0.6);
        }
        &::after{
          content: '';
          position: absolute;
          height: 1px;
          width: 100%;
          bottom: 0;
          left: 0;
          border-bottom: 1px solid rgba(232,232,232,0.8);
          transform: scaleY(0.6);
        }
      }
    }
  }