CSS如何將框顯示為網格-有解無憂

我正在嘗試按從框 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>

知道我做錯了什么嗎？

uj5u.com熱心網友回復：

使用 css 網格將使其變得如此簡單：

.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;
  grid-template-columns : repeat(5,1fr);
  gap : 2rem;
  flex-wrap:wrap;
  
}

.boxes > div{
  border:1px solid red;
  min-height : 100px;
  flex:none;
  /* 2rem is for the gap on the parent */
  width:calc(20% - 2rem);
}

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

uj5u.com熱心網友回復：

實作這一點的簡單方法是使用 css 網格而不是 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;
}

uj5u.com熱心網友回復：

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

轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/422393.html

標籤：

上一篇：將垂直選單更改為水平CSS

下一篇：jQuery：當沒有內容加載時隱藏顯示更多按鈕