Skip to main content
D
default0vaokg78cv42
Inspiring
June 26, 2022
Answered

Product Grid

  • June 26, 2022
  • 2 replies
  • 751 views

I am trying to code a product grid, similar to a big box store website, such as grainger: https://www.grainger.com

Should I use CSS flexbox GRID, or both?  I know bootsrap has cards, badges, etc, but I would rather code it myself. Anyone please advise, if you have any ideas. Thanks. 

    This topic has been closed for replies.

    2 replies

    Nancy OShea
    Community Expert
    Nancy OSheaCommunity Expert
    Community Expert
    June 26, 2022
    quote

    I am trying to code a product grid, similar to a big box store website, such as grainger. ...but I would rather code it myself.


    By @default0vaokg78cv42

    ==============

    One page contains nearly 5,000 lines of code. And I guarantee Grainger is no static website. 

     

    If you're planning an e-commerce site, you should be using a shopping cart Template that's compatible with your cart system.  

     

    Nancy O'Shea— Product User & Community Expert
    O
    osgood_
    Legend
    June 26, 2022
    quote

     

    One page contains nearly 5,000 lines of code. And I guarantee Grainger is no static website. 

     

     

    By @Nancy OShea

      

     

    5000 lines of pure junk if this is anything to go by:

     

    </div>

    </div>
    </div>
    </div>
    </div>
    </div>
    </div>
    </div>
    </div>
    </div>

      Nancy OShea
      Community Expert
      Nancy OSheaCommunity Expert
      Community Expert
      June 26, 2022

      With Flexbox in Bootstrap. No custom CSS needed.

       

      <body class="d-flex flex-column min-vh-100">
<div class="container-fluid">
<div class="h-100 p-4 bg-light border rounded-3 mx-auto text-center">
<h2>Bootstrap 5 in Dreamweaver</h2>
</div>
<div class="row align-items-center text-center row-cols-auto">
<div class="col">
<img class="img-thumbnail" src="https://dummyimage.com/400x400" alt="placeholder">
<p>Caption</p>
</div>
<div class="col">
<img class="img-thumbnail" src="https://dummyimage.com/400x400" alt="placeholder">
<p>Caption</p>
</div>
<div class="col">
<img class="img-thumbnail" src="https://dummyimage.com/400x400" alt="placeholder">
<p>Caption</p>
</div>
<div class="col">
<img class="img-thumbnail" src="https://dummyimage.com/400x400" alt="placeholder">
<p>Caption</p>
</div>
<div class="col">
<img class="img-thumbnail" src="https://dummyimage.com/400x400" alt="placeholder">
<p>Caption</p>
</div>
<div class="col">
<img class="img-thumbnail" src="https://dummyimage.com/400x400" alt="placeholder">
<p>Caption</p>
</div>
<div class="col">
<img class="img-thumbnail" src="https://dummyimage.com/400x400" alt="placeholder">
<p>Caption</p>
</div>
<div class="col">
<img class="img-thumbnail" src="https://dummyimage.com/400x400" alt="placeholder">
<p>Caption</p>
</div>
</div>
</div>
</body>

       

      Nancy O'Shea— Product User & Community Expert
        O
        osgood_
        Legend
        June 26, 2022

        For the main grid use 'grid'.  You could use either flexbox or grid for the product boxes. 

        Below is a simple responsive grid example:

         

        <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Product Grid</title>
<style>
.productGrid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr) );
grid-auto-rows: minmax(250px, auto);
grid-gap: 10px;
width: 90%;
max-width: 1200px;
margin: 0 auto;
}

.product {
display: grid;
place-content: center;
border: 1px solid #999;

}
</style>
</head>
<body>
<div class="productGrid">
<div class="product">Product Name</div>
<div class="product">Product Name</div>
<div class="product">Product Name</div>
<div class="product">Product Name</div>
<div class="product">Product Name</div>
<div class="product">Product Name</div>
<div class="product">Product Name</div>
<div class="product">Product Name</div>
<div class="product">Product Name</div>
<div class="product">Product Name</div>
<div class="product">Product Name</div>
<div class="product">Product Name</div>
<div class="product">Product Name</div>

</div>

</body>
</html>

          

          D
          default0vaokg78cv42Author
          Inspiring
          June 26, 2022

          That looks great, thanks. Just what I needed.

          Terms & ConditionsAccessibility statement
          Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices