移动端常见九宫格布局

 <div class="grid">
      <ul class="item cf">
        <li class="liItem">
          <div>标题一</div>
        </li>
        <li class="liItem">
          <div>标题二</div>
        </li>
        <li class="liItem">
          <div>标题三</div>
        </li>
        <li class="liItem">
          <div>标题四</div>
        </li>
        <li class="liItem">
          <div>标题五</div>
        </li>
        <li class="liItem">
          <div>标题六</div>
        </li>
        <li class="liItem">
          <div>标题七</div>
        </li>
      </ul>
    </div>

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);
        }
      }
    }
  }