• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
0

Product Grid

Contributor ,
Jun 26, 2022 Jun 26, 2022

Copy link to clipboard

Copied

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. 

Views

204

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines

correct answers 2 Correct answers

LEGEND , Jun 26, 2022 Jun 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;
}

...

Votes

Translate

Translate
Community Expert , Jun 26, 2022 Jun 26, 2022

Votes

Translate

Translate
LEGEND ,
Jun 26, 2022 Jun 26, 2022

Copy link to clipboard

Copied

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>	

  

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Contributor ,
Jun 26, 2022 Jun 26, 2022

Copy link to clipboard

Copied

That looks great, thanks. Just what I needed.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Jun 26, 2022 Jun 26, 2022

Copy link to clipboard

Copied

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 & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Jun 26, 2022 Jun 26, 2022

Copy link to clipboard

Copied

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>

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Jun 26, 2022 Jun 26, 2022

Copy link to clipboard

Copied

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 & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Contributor ,
Jun 26, 2022 Jun 26, 2022

Copy link to clipboard

Copied

that looks interesting, i will give it a try. 

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Contributor ,
Jun 27, 2022 Jun 27, 2022

Copy link to clipboard

Copied

I was able to create the desired grid look...success. Mobile friendly  positive. No html nor CSS errors:

https://www.drct.com

Thanks for your help. 

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Jun 27, 2022 Jun 27, 2022

Copy link to clipboard

Copied

quote

I was able to create the desired grid look...success. Mobile friendly  positive. No html nor CSS errors:

https://www.drct.com

Thanks for your help. 


By @default0vaokg78cv42

 

 

Works well, using very little code, which is good in my view....the less the better. Generally no need for frameworks these days, especially if you're working as a 'lone ranger'.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Contributor ,
Jun 27, 2022 Jun 27, 2022

Copy link to clipboard

Copied

LATEST

I believe you are the one who give me the CSS grid code. Worked fantastic. I'm trying to minimize frameworks and defintely the "lone ranger". 

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Contributor ,
Jun 26, 2022 Jun 26, 2022

Copy link to clipboard

Copied

Someone gave me a simple CSS grid. It's working quite well. I am not looking to emulate the entire grainger site. One can learning something from the code though.  I do use a php, mysql template for ecommerce.  That works well, but not so good for SEO!

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Jun 26, 2022 Jun 26, 2022

Copy link to clipboard

Copied

This may help:

https://www.webdevsplanet.com/post/how-to-make-seo-friendly-urls-in-php

Wappler, the only real Dreamweaver alternative.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Contributor ,
Jun 26, 2022 Jun 26, 2022

Copy link to clipboard

Copied

Thanks, helpful article. This community is a treasure trove of information. Such great people here. 

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines