Skip to main content
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
    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
    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
    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
    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>	

      

    Inspiring
    June 26, 2022

    That looks great, thanks. Just what I needed.