如何用CSS将盒子显示为网格？

Question

我试图将一些框按从框 1 到框 10 的顺序显示为网格。所以它看起来像：

[Box1] [Box2] [Box3] [Box4] [Box5]

[Box6] [Box7] [Box8] [Box9] [Box10]

目前，我的盒子看起来像这样：

[Box1] [Box2] [Box3] [Box4] [Box5] [Box6] [Box7] 

[Box8]               [Box9]               [Box10]

[Box1] [Box2] [Box3] [Box4] [Box5]

[Box6] [Box7] [Box8] [Box9] [Box10]

[Box1] [Box2] [Box3] [Box4] [Box5] [Box6] [Box7] 

[Box8]               [Box9]               [Box10]

知道我做错了什么吗？

Answer 1

1. 使用CSS Grid将使事情变得如此简单：

.boxes {
  display: grid;
  grid-template-columns : repeat(5,1fr);
  gap : 2rem;
}
/* for having some visuals */
.boxes > div{
  border:1px solid red;
  min-height : 100px
}

<div class="boxes">
  <div class="box-one">Box 1</div>
  <div class="box-two">Box 2</div>
  <div class="box-three">Box 3</div>
  <div class="box-four">Box 4</div>
  <div class="box-five">Box 5</div>
  <div class="box-six">Box 6</div>
  <div class="box-seven">Box 7</div>
  <div class="box-eight">Box 8</div>
  <div class="box-nine">Box 9</div>
  <div class="box-ten">Box 10</div>
</div>

2. 你也可以使用Flexbox，但你必须做一些计算：

.boxes {
  display: flex;
  gap : 2rem;
  flex-wrap:wrap;  
}

.boxes > div{
  border:1px solid red;
  min-height : 100px;
  flex:none;
  width:calc(20% - 1.75rem);
}

<div class="boxes">
  <div class="box-one">Box 1</div>
  <div class="box-two">Box 2</div>
  <div class="box-three">Box 3</div>
  <div class="box-four">Box 4</div>
  <div class="box-five">Box 5</div>
  <div class="box-six">Box 6</div>
  <div class="box-seven">Box 7</div>
  <div class="box-eight">Box 8</div>
  <div class="box-nine">Box 9</div>
  <div class="box-ten">Box 10</div>
</div>