如何将框显示为 css 的网格？

Question

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

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

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

目前，我的盒子是这样的：

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

[Box8]               [Box9]               [Box10]

.boxes {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin: 4% 0;
  color: white;
}

<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>

知道我做错了什么吗？

Answer 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>

你也可以使用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>

Answer 2

简单的方法是使用 css grid 而不是 flex

.boxes {
  display: grid;
  grid-template: "1 2 3 4 5"
                 "6 7 8 9 10";
  grid-gap: 6px;  /*gap between child*/
}
.boxes > div {
  /*set child's background color*/
  background-color: darkcyan;
}

Answer 3

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Boxes</title>
</head>
<body>
      <table border="2px" style="width:100%">
        <tbody>
            <tr>
                <td><br /></td>
                <td><br /></td>
                <td><br /></td>
                <td><br /></td>
                <td><br /></td>
            </tr>
        </tbody>
        <tbody>
            <tr>
                <td><br /></td>
                <td><br /></td>
                <td><br /></td>
                <td><br /></td>
                <td><br /></td>
            </tr>
        </tbody>
      </table>
</body>
</html>

如何将框显示为 css 的网格？

How to display boxes as a grid with css?

html

css

css-grid