利用div+css 设计一个三行三列的一个布局效果

可以尝试以下代码实现一个三行三列的布局效果：

HTML代码：

<div class="container">
  <div class="row">
    <div class="col">1</div>
    <div class="col">2</div>
    <div class="col">3</div>
  </div>
  <div class="row">
    <div class="col">4</div>
    <div class="col">5</div>
    <div class="col">6</div>
  </div>
  <div class="row">
    <div class="col">7</div>
    <div class="col">8</div>
    <div class="col">9</div>
  </div>
</div>

CSS代码：

.container {
  display: flex;
  flex-wrap: wrap;
}

.row {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
}

.col {
  flex-basis: 33.33%;
  height: 100px;
  background-color: #ccc;
  border: 1px solid #666;
  box-sizing: border-box;
}

在这个代码中，我们使用了 Flex 布局，使得我们的容器 `.container` 可以自适应屏幕大小，每一行都可以最多展示三个元素。`.row` 定义为一个行元素，内部的 `.col` 元素则定义为列元素，使用 `flex-basis: 33.33%` 让每个列元素占据一行中的三分之一，通过 `height: 100px` 和 `background-color: #ccc` 以及 `border: 1px solid #666` 来设置每个列元素的样式。