css四宫格、九宫格（grid实现）

1、HTML部分

<div class="parent">
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
    <div class="box4"></div>
    <div class="box5"></div>
    <div class="box6"></div>
    <div class="box7"></div>
    <div class="box8"></div>
    <div class="box9"></div>
</div>

2、css公共部分

      .box1,
      .box2,
      .box3,
      .box4,
      .box5,
      .box6,
      .box7,
      .box8,
      .box9 {
        width: 150px;
      }
      .box1 {
        background-color: aqua;
      }
      .box2 {
        background-color: pink;
      }
      .box3 {
        background-color: blue;
      }
      .box4 {
        background-color: red;
      }
      .box5 {
        background-color: yellow;
      }
      .box6 {
        background-color: fuchsia;
      }
      .box7 {
        background-color: black;
      }
      .box8 {
        background-color: indianred;
      }
      .box9 {
        background-color: aquamarine;
      }

3、四宫格CSS部分（把box5~9注释掉）

.parent {
     /* grid是二维布局，行 * 列 的网格 */
        display: grid;
        width: 320px;
        height: 320px;
        /* 横向等比分割 */
        justify-content: space-evenly;
        /* 纵向等比分割 */
        align-content: space-evenly;
        /* 两行两列的表格，行、列的宽高尽量等于单个box的的宽高，且总宽高尽量不要大于父元素及 parent 的宽高，不然同样会显示异常*/
        grid-template-columns: repeat(2, 150px);
        grid-template-rows: repeat(2, 150px);
        border: 1px solid red;
}

4、九宫格CSS部分

 

.parent {
        /* grid是二维布局，行 * 列 的网格 */
        display: grid;
        width: 500px;
        height: 500px;
        /* 横向等比分割 */
        justify-content: space-evenly;
        /* 纵向等比分割 */
        align-content: space-evenly;
        /* 三行三列的表格 */
        grid-template-columns: repeat(3, 150px);
        grid-template-rows: repeat(3, 150px);
        border: 1px solid red;
}