CSS 实现九宫格

1:flex布局

水平三等份（width:calc(calc(100% / 3) -10px)）

<div class="blockDiv">
  <div class="block">1</div>
  ....
  <div class="block">9</div>
</div> 

<style>
  .blockDiv{
    width:100%;
    display:flex;
    flex-wrap:wrap;
  }
  .block{
    width:calc(calc(100% / 3) -10px)
    box-sizing:border-box;
  }
</style>

2:grid布局：通过grid-template-columns和grid-template-rows设置列宽和行高

<div class="blockDiv">
  <div class="block">1</div>
  ....
  <div class="block">9</div>
</div> 

<style>
  .blockDiv{
    width:100%;
    display:grid;
    grid-template-columns: repeat(3, 1fr); 
    grid-template-rows: repeat(3, 1fr);
  }
  .block{
    width:calc(calc(100% / 3) -10px)
    box-sizing:border-box;
  }
</style>