'Creating a Three Columned Product Grid by Getting Data using Foreach Loop

I need help and understanding as I am trying to populate each DIV-column with product data, taken from the database. I need a maximum of three columns per row, and as many rows and columns as there are products.

Example: if there are three products in the database, one row with three columns will be generated. If there are ten products in the database, four rows will be generated where of three of them will be full (three columns per row) and the last (the forth row) will have one column -- and so forth.

I need the foreach loop to get data from the database for each option (product name, product price, description etc) and populate it.

To accomplish this, I have created a three column grid using HTML and CSS (with media query).

* {
      box-sizing: border-box;
    }
    
    .product-columns {
      float: left;
      width: 33.3%;
      padding: 8px;
    }
    
    .product-price {
      list-style-type: none;
      border: 1px solid #eee;
      margin: 0;
      padding: 0;
      -webkit-transition: 0.3s;
      transition: 0.3s;
    }
    
    .product-price:hover {
      box-shadow: 0 10px 15px 0 rgba(0,0,0,0.2)
    }
    
    .product-price .product-name {
      background-color: #111;
      color: white;
      font-size: 25px;
    }
    
    .product-price li {
      border-bottom: 1px solid #eee;
      padding: 20px;
      text-align: center;
    }
    
    .product-price .product-grey {
      background-color: #eee;
      font-size: 20px;
    }
    
    .buy-now-button {
      background-color: #333333;
      border: none;
      color: white;
      padding: 10px 25px;
      text-align: center;
      text-decoration: none;
      font-size: 18px;
    }
    
    .buy-now-button:hover {
      background-color: #000000;
      border: none;
      color: white;
      padding: 10px 25px;
      text-align: center;
      text-decoration: none;
      font-size: 20px;
    }
    
    @media only screen and (max-width: 600px) {
      .product-columns {
        width: 100%;
      }
    }

<div class="product-columns">
      <ul class="product-price">
        <li class="product-name">Product One</li>
        <li class="product-grey">Price: €9.99</li>
        <li class="product-grey">Sale Price: €8.99</li>
        <li class="product-grey">RRP: €11.99</li>
        <li>Seller: John Doe</li>
        <li>Ext. Delivery: 3-7 days</li>
        <li>Ext. Delivery Cost: €4.99 to €9.99</li>
        <li class="product-grey"><a href="#" class="buy-now-button">Buy Now</a></li>
      </ul>
    </div>
    
    <div class="product-columns">
      <ul class="product-price">
        <li class="product-name">Product Two</li>
        <li class="product-grey">Price: €9.99</li>
        <li class="product-grey">Sale Price: €8.99</li>
        <li class="product-grey">RRP: €11.99</li>
        <li>Seller: John Doe</li>
        <li>Ext. Delivery: 3-7 days</li>
        <li>Ext. Delivery Cost: €4.99 to €9.99</li>
        <li class="product-grey"><a href="#" class="buy-now-button">Buy Now</a></li>
      </ul>
    </div>
    
    <div class="product-columns">
      <ul class="product-price">
        <li class="product-name">Product Three</li>
        <li class="product-grey">Price: €9.99</li>
        <li class="product-grey">Sale Price: €8.99</li>
        <li class="product-grey">RRP: €11.99</li>
        <li>Seller: John Doe</li>
        <li>Ext. Delivery: 3-7 days</li>
        <li>Ext. Delivery Cost: €4.99 to €9.99</li>
        <li class="product-grey"><a href="#" class="buy-now-button">Buy Now</a></li>
      </ul>
    </div>

This is the PHP, which I am not at all sure about. This is the part I am trying to understand better - this is the part I need help with.

The PHP code, using a foreach loop:

<?php  foreach ($products as $key => $prod) { ?>

<!-- wrap the loop begin -->
<div class="product-wrapper">

<!-- DIV loop -->
<div class="product-columns">
  <ul class="product-price">
    <li class="product-name"><?php echo $prod['name'] ?></li>
    <li class="product-grey">Price: <?php echo $prod['price'] ?></li>
    <li class="product-grey">Sale Price: <?php echo $prod['sale_price'] ?></li>
    <li class="product-grey">RRP: <?php echo $prod['product_rrp'] ?></li>
    <li>Seller: <?php echo $prod['seller_nickname'] ?></li>
    <li>Ext. Delivery: <?php echo $prod['delivery_time'] ?></li>
    <li>Ext. Delivery Cost: <?php echo $prod['del_cost_from'] ?> to <?php echo $prod['del_cost_to'] ?></li>
    <li class="product-grey"><a href="#" class="buy-now-button">Buy Now</a></li>
  </ul>
</div>
<!-- DIV loop ends -->

<!-- wrap the loop end -->
</div>

<?php endforeach; } ?>

I have taken help from other questions here on SO as I am trying to learn the best I can. Right now, I am not sure if this is the right or wrong way to go? Am I doing this right?

Any advice is appreciated.

Solution 1:^[1]

Instead of $thirdcoulmn variable as boolean, store modulus value which will help you to open and close div with class="product-column"

<div class="product-wrapper">
    <?php
    // I assume loop runs with in product wrapper
    $i = 0;
    foreach ($products as $key => $prod) {
        ?>
        <!-- wrap the loop begin -->
        <!-- DIV loop -->
        <?php
        if ($i % 3 == 0) { //Opening the loop
            ?>
            <div class="product-columns">
                <?php
            }
            ?>
            <ul class="product-price">
                <li class="product-name"><?php echo $prod['name'] ?></li>
                <li class="product-grey">Price: <?php echo $prod['price'] ?></li>
                <li class="product-grey">Sale Price: <?php echo $prod['sale_price'] ?></li>
                <li class="product-grey">RRP: <?php echo $prod['product_rrp'] ?></li>
                <li>Seller: <?php echo $prod['seller_nickname'] ?></li>
                <li>Ext. Delivery: <?php echo $prod['delivery_time'] ?></li>
                <li>Ext. Delivery Cost: <?php echo $prod['del_cost_from'] ?> to <?php echo $prod['del_cost_to'] ?></li>
                <li class="product-grey"><a href="#" class="buy-now-button">Buy Now</a></li>
            </ul>
            <?php
            if ($i % 3 == 2) { //This is closing div after every three products
                ?>   
            </div>
            <?php
        }
        $i++;
    }
    ?>
    <!-- DIV loop ends -->
    <?php
    if ($i % 3 < 2) {  //Important..!! This is closing div if last row has less than three products
        ?>   
    </div>
    <?php
}
?>
<!-- wrap the loop end -->
</div>

Solution 2:^[2]

if you want to show three products you can do that by using flex box.

.product-container {
  height: 100vh;
  width: 100vw;
  display: flex;
  flex-wrap: wrap;
}

.product-holders {
  margin: 0px 1%;
  width: 30%;
  height: 30%;
  min-height: 30px;
  min-width: 30px;
  background: red;
  flex: 0 0 30%;
  /*or use flex-besis : 30% */
}


/*product card styles */
.card {
  width: 300px;
  height: 440px;
  border-radius: 5px;
  box-shadow: 0 4px 6px 0 rgba(0, 0, 0, 0.2);
}
.card > *:not(img) {
  padding: 5px 10px;
}

.card img {
  width: 100%;
  height: 180px;
}

.card-body {
  padding: 5px;
}
.row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 5px;
}

.card-body p {
  color: #3d3d3d;
  margin-bottom: 20px;
  font-size: 14px;
}

.view-btn a {
  padding: 5px 15px;
  border: 1.5px solid #007bff;
  border-radius: 3px;
  text-decoration: none;
  color: #007bff;
}

.btn-group {
  display: flex;
}

.btn-group .btn a {
  padding: 5px 15px;
  background-color: #28a745;
  color: #fff;
  border-radius: 3px;
  margin-left: -2px;
}
.btn-group a {
  margin: 0 10px;
  text-decoration: none;
  color: #000;
}

<!-- container will be outside of you loop-->
<div class="product-container">
<!-- put one div in the loop-->
<!-- <?php  foreach ($products as $key => $prod) { ?> -->
  <div class="product-holders">
    <div class="card">
    <img src="https://images.unsplash.com/photo-1542291026-7eec264c27ff?ixid=MXwxMjA3fDB8MHxzZWFyY2h8MXx8c2hvZXMlMjBuaWtlfGVufDB8fDB8&ixlib=rb-1.2.1&auto=format&fit=crop&w=600&q=60" alt="" />
    <div class="card-body">
      <div class="row">
        <div class="card-title">
          <h4>Nike Sneaker 
         <!-- <?php echo $prod['name'] ?> -->
          </h4>
          <h3>$120
         <!--  <?php echo $prod['price'] ?> -->
          </h3>
        </div>
        <div class="view-btn">
          <a href="">View Details</a>
        </div>
      </div>
      <hr />
      <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi,
        dignissimos.
      </p>
      <div class="btn-group">
        <div class="btn">
          <a href="">Buy Now</a>
        </div>
        <a href=""> Cancel</a>
      </div>
    </div>
  </div>
  </div>
 <!-- <?php   } ?> -->
</div>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1
Solution 2

'Creating a Three Columned Product Grid by Getting Data using Foreach Loop

Solution 1:[1]

Solution 2:[2]

Sources

Related Questions

Solution 1:^[1]

Solution 2:^[2]