css实现九宫格图

CSS实现九宫格图，是前端开发中常用的一种技巧，可以用于构建网格式布局。

<div class="container">
  <div class="row">
    <div class="col-4"></div>
    <div class="col-4"></div>
    <div class="col-4"></div>
  </div>
  <div class="row">
    <div class="col-4"></div>
    <div class="col-4"></div>
    <div class="col-4"></div>
  </div>
  <div class="row">
    <div class="col-4"></div>
    <div class="col-4"></div>
    <div class="col-4"></div>
  </div>
</div>

这段代码将所有元素包含在一个class为container的外层div中，然后将每一行元素放在一个class为row的div中，再将每个元素放在具有大小为4的class为col-4的div中。

接下来使用CSS中的flex布局，实现元素在父容器中自适应排列的效果。具体实现方式如下：

.container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.row {
  width: 100%;
  display: flex;
  justify-content: center;
}

.col-4 {
  width: 33.3333%;
  height: 200px;
  background-color: #ccc;
  Box-sizing: border-Box;
  border: 1px solid #999;
  margin: 5px;
}

上述代码中，container使用flex布局，wrap属性代表当内容过多时自动换行，justify-content属性用于居中对齐。row使用flex布局，并使其占满全部宽度。col-4使用33.3333%的宽度，使所有列等宽，并设置它的高度、背景色、边框和外边距。Box-sizing属性用于调整元素的边框和内边距，使其与容器的尺寸匹配。

总的来说，CSS实现九宫格图的技巧比较简单，只需要灵活运用flex布局和盒模型，就可以轻松实现。