Generating 3 items per row-CodePudding

I am making a website for a school project, I am a noob!

I am one step away from completing the project, the last piece is to get my Dynamically created HTML products to display in a row of 3.

Here is my HTML:

<div id="product-featured-box">

</div>

Here is the CSS I have:

.product-featured-box {
  display: flex;
  justify-content: space-between;
  table-layout: fixed;
}
 
.product-box {
  display: flex;
}

In the dev view on Google Chrome, the HTML is generated properly, all product-boxes are inside the featured-product-box, but I have no idea how to get the CSS to get it to do what i want!

Any ideas would help!

I a using MAC OS

I tried playing around with the CSS

CodePudding user response：

The best solution would be with display: grid. Tell the boxes to display themselves 3 per row of equal width:

#product-featured-box {
  display: grid;
  grid-template-columns: repeat(3,1fr);
}

<div id="product-featured-box">
  <div >1</div>
  <div >2</div>
  <div >3</div>
  <div >4</div>
  <div >5</div>
  <div >6</div>
  <div >7</div>
  <div >8</div>
  <div >9</div>
  <div >10</div>
</div>

fr is a unit of proportionality. 1fr means 1 unit of proportionality, and since you're giving all boxes the same value, they all share the same width.

CodePudding user response：

Use the below code it will works for you.

<div >
<div >1</div>
<div >2</div>
<div >3</div>
</div>

<style type="text/css">
    .product-featured-box {
  display: flex;
  justify-content: space-between;

}
 
.product-box {
width: 33.3%;
padding: 15px;
text-align: center;
}
</style>