九宫格css

grid网格布局

ul{
      padding: 0;
      width: 100%;
      height: 100%;
      /*设置为grid网格布局*/
      display: grid;
      /*设置三行高度都为100px；*/
      grid-template-rows:100px 100px 100px ;
       /*设置三行宽度都为100px；*/
      grid-template-columns: 100px 100px 100px;
      置网格的行间距、列间距都为3px
      /*grid-gap: 3px;*/
  }

flex布局

  ul{
      padding: 0;
      width: 100%;
      height: 100%;
      /*设置布局方式为flex布局*/
      display: flex;
      /*换行*/
      flex-wrap: wrap;
  }
  li{
  	//三个盒子的高、宽度 *3+ 间距 *2 *3个= 总宽/高度
      /*固定设置每个li的宽度和高度*/
      width: 94px;
      height: 94px;
      margin: 3px;
      list-style: none;
      text-align: center;
      line-height: 100px;
      background-color: #243F49;
      color: white;
      border: 1px solid white;
      font-weight: bolder;
  }

点击查看代码

  ul{
      padding: 0;
      width: 100%;
      height: 100%;
      /*清除浮动*/
      overflow: hidden;    
  }
  li{
      /*固定设置每个li的宽度和高度*/
      width: 94px;
      height: 94px;
      /*第三种方法：浮动定位进行换行*/
      float: left;
      margin: 3px;
      list-style: none;
      text-align: center;
      line-height: 100px;
      background-color: #243F49;
      color: white;
      font-weight: bolder;
  }