css九宫格

 <style type="text/css">
   li {
    width: 100%;
    float: left;
   }
   li:first-child:nth-last-child(2),
   li:first-child:nth-last-child(2)~li,li:first-child:nth-last-child(4),
   li:first-child:nth-last-child(4)~li {
    width: 50%;
   }
   li:first-child:nth-last-child(3),
   li:first-child:nth-last-child(3)~li,li:first-child:nth-last-child(5),
   li:first-child:nth-last-child(5)~li,li:first-child:nth-last-child(6),
   li:first-child:nth-last-child(6)~li,li:first-child:nth-last-child(7),
   li:first-child:nth-last-child(7)~li,li:first-child:nth-last-child(8),
   li:first-child:nth-last-child(8)~li,li:first-child:nth-last-child(9),
   li:first-child:nth-last-child(9)~li {
    width: 33%;
   }
  </style>

  <ul>
   <li>1</li>
  </ul>