CODEWITHSUNDEEP
htmlcss
Victor
Victor

Reputation: 403

How to display boxes as a grid with css?

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

Any idea what I'm doing wrong?

Upvotes: 0

Views: 1036

Answers (3)

Youssouf Oumar
Youssouf Oumar

Reputation: 45835

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

  1. You could also use Flexbox, but you have to do some calculations :

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

Upvotes: 8

Babu Tunk
Babu Tunk

Reputation: 1

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

Upvotes: 0

Musadarj
Musadarj

Reputation: 62

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

Upvotes: 0

Related Questions