2 Correct answers
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;
}
12
Replies
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.
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>
I was able to create the desired grid look...success. Mobile friendly positive. No html nor CSS errors:
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'.
AdChoices