div 类和 CSS 行 [重复]

Question

如果我在一个 div 中有 6 个项目并且我想在 3 和 3 的正下方放置空间，我可以使用一个 div 来包含我的 6 个总 div 并将它们隔开以包裹在下面，还是我需要有两个单独的 div 来包含每个3个？

我尝试使用 div 将每个 div 中的 3 个框分开，但我无法让这些框对齐。

我正在尝试做的是这个-

 box       Box      Box

 box       Box      Box

目前看起来是这样的

box box box box box box

如果我

.boxes {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;
}

<div class="boxes">
  <div class="box1">Box 1</div>
  <div class="box2">Box 2</div>
  <div class="box3">Box 3</div>
  <div class="box4">Box 4</div>
  <div class="box5">Box 5</div>
  <div class="box6">Box 6</div>
</div>

将 div class=boxes 拆分为 3 并为最后三个框创建另一个，它将分成两行，但我无法让它们对齐。有没有办法绕过我写的代码？

Answer 1

如果要设置所需的列数，请使用CSS Grid。

.boxes {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}

<div class="boxes">
  <div class="box1">Box 1</div>
  <div class="box2">Box 2</div>
  <div class="box3">Box 3</div>
  <div class="box4">Box 4</div>
  <div class="box5">Box 5</div>
  <div class="box6">Box 6</div>
</div>

如果您愿意，也可以使用 CSS repeat() 函数：

grid-template-columns: repeat(3, 1fr);