换一种方法不用flex布局

可以使用CSS Grid布局来代替Flex布局。

CSS Grid布局是一种二维网格布局系统，可以让我们更轻松地在网页上创建复杂的布局。它与Flex布局不同，它不是一维的，而是二维的。

下面是一个简单的例子，使用CSS Grid布局来创建一个基本的网格布局：

HTML代码：

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
</div>

CSS代码：

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 10px;
}

.item {
  background-color: #ccc;
  padding: 20px;
}

在这个例子中，我们使用了CSS Grid布局来创建一个包含6个项目的容器。我们使用了display: grid;来启用CSS Grid布局，并使用grid-template-columns指定了3列，每列的宽度相等。我们还使用了grid-gap来添加网格项之间的间隔。最后，我们定义了一个基本的样式来显示每个项目的背景颜色和填充。

通过使用CSS Grid布局，我们可以更轻松地创建复杂的布局，比如网格、响应式布局、瀑布流布局等。