Make product grid a CSS grid so the density slider actually changes column count

d2dfd90a33183568bd23a97b8f23e12ed2a64b4d · 2026-05-18 20:33:25 -0700 · Steve

Files touched

M index.html

Diff

commit d2dfd90a33183568bd23a97b8f23e12ed2a64b4d
Author: Steve <steve@designerwallcoverings.com>
Date:   Mon May 18 20:33:25 2026 -0700

    Make product grid a CSS grid so the density slider actually changes column count
---
 index.html | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/index.html b/index.html
index 44251cd..7d80b25 100644
--- a/index.html
+++ b/index.html
@@ -55,8 +55,8 @@ body{font-family:'Inter',sans-serif;background:var(--cream);color:var(--black);o
 .color-chip.active .chip-label{color:#fff}
 .chip-dot{width:12px;height:12px;border-radius:6px;flex-shrink:0}
 .chip-label{font-weight:500;font-size:12px;color:var(--black)}
-.product-grid{display:flex;flex-wrap:wrap;gap:14px;padding:20px 24px}
-.product-card{width:calc(50% - 7px);cursor:pointer}
+.product-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:14px;padding:20px 24px}
+.product-card{cursor:pointer}
 .product-card img{width:100%;aspect-ratio:1/1.15;object-fit:cover;border-radius:6px;background:#F0EAE2}
 .product-card .name{font-weight:600;font-size:12px;color:var(--black);margin-top:8px}
 .product-card .color{font-size:11px;color:var(--gray);margin-top:2px}

← a4e67c8 header: remove duplicate <header> with dwmOpen-contact (was · back to Flockedwallpaper · Wire the Sort select to actually re-sort the grid (newest/co 0f7f065 →