Home / Business Ready Pages / Shop Product Grid

Shop Product Grid CSS Template, Free with Live Demo

Free e-commerce product grid template for a knitwear shop. Working category filters, sort by price, color swatches, badges and a basket counter. Live demo. The example is Loop and Knot, a knitwear shop.

Open live demo Download HTML file View code on GitHub

Shop Product Grid CSS template example: Loop and Knot, a knitwear shop

What is shop product grid?

A product grid is the heart of any online shop. Clear photos, name, price and colors at a glance, filters at the top and a sort menu, so people find what they want fast.

The products live in one small JavaScript list. Filtering and sorting redraw the grid instantly, and Add to basket updates the counter with a little bump so people know it worked.

Good for

Clothing and fashion shops
Handmade and craft stores
Product catalogs
Shopify or WooCommerce theme mockups

What you get in this template

Category filter chips that work
Sort by newest or price
Color swatches and New or Bestseller badges
Basket counter that bumps on add
Four, three or two columns by screen size

The key CSS

This is the part that makes the shop product grid look work. Copy it into your own project.

.grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
@media (max-width: 960px) { .grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 700px) { .grid { grid-template-columns: 1fr 1fr; } }
.pr .ph { aspect-ratio: 4 / 5; background: var(--c); }
.chips button[aria-pressed="true"] { background: #1f1b16; color: #fff; }

How to use it

Click Download HTML file above.
Open the file in any code editor, like VS Code.
Change the text, colors and links to match your project. Colors are at the top of the style tag.
Upload it to any host, such as GitHub Pages, Netlify or your own server. It is one file with no build step.