移動端常見九宮格佈局

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