移动端九宫格布局

样式：

<style>
  *{
    margin: 0;
    padding: 0;
  }
  ul{
    overflow: hidden;
    list-style: none;
    position: relative;
    padding-right: .6rem;
    width: calc(100% - .6rem);
  }
  li {
    float: left;
    position: relative;
    width: calc(33.3% - .6rem);
    height: 0;
    padding-bottom: calc(33.3% - .6rem);
    margin: .6rem 0 0 .6rem;
    background: #000;
  }
  li div {
    color: #fff;
    text-align: center;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }
</style>

HTML：

<!--  
  自适应九宫格，边框为0.6rem, 中间的数字垂直水平居中
    1.c3计算属性: calc(),
    2.垂直水平居中: 绝对定位，top：50%； margin: -height的一半
  -->
<ul>
  <li><div>1</div></li>
  <li><div>2</div></li>
  <li><div>3</div></li>
  <li><div>4</div></li>
  <li><div>5</div></li>
  <li><div>6</div></li>
  <li><div>7</div></li>
  <li><div>8</div></li>
  <li><div>9</div></li>
</ul>