CSS how to display boxes as a grid-CodePudding

I'm trying to display some boxes as a grid in order from box 1 to box 10. So it would look like:

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

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

Currently, my boxes look like this:

[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 >
  <div >Box 1</div>
  <div >Box 2</div>
  <div >Box 3</div>
  <div >Box 4</div>
  <div >Box 5</div>
  <div >Box 6</div>
  <div >Box 7</div>
  <div >Box 8</div>
  <div >Box 9</div>
  <div >Box 10</div>
</div>

Any idea what I'm doing wrong?

CodePudding user response：

Using css grid will make it as simple as this :

.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 >
  <div >Box 1</div>
  <div >Box 2</div>
  <div >Box 3</div>
  <div >Box 4</div>
  <div >Box 5</div>
  <div >Box 6</div>
  <div >Box 7</div>
  <div >Box 8</div>
  <div >Box 9</div>
  <div >Box 10</div>
</div>

You could also use flexbox, but you have to do some calculation (not that hard but...) like so :

.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 >
  <div >Box 1</div>
  <div >Box 2</div>
  <div >Box 3</div>
  <div >Box 4</div>
  <div >Box 5</div>
  <div >Box 6</div>
  <div >Box 7</div>
  <div >Box 8</div>
  <div >Box 9</div>
  <div >Box 10</div>
</div>

CodePudding user response：

easy way to accomplish that is with css grid not 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;
}

CodePudding user response：

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