Repair Product Page Grid Layout

The product page of my site has a broken grid: cards that should sit in neat rows are scattering into uneven columns, leaving awkward gaps and pushing some items far right or far below the fold. The issue is strictly a layout problem—styling and responsiveness elsewhere are fine—so the fix should focus on the underlying HTML structure and CSS grid/flex rules that govern this page.

You’ll dive into the existing markup, identify why the grid is collapsing, and apply clean, standards-compliant code to restore consistent alignment across modern browsers. A quick walkthrough of what I expect:

• Diagnose the root cause in the current HTML/CSS.
• Update or rewrite the grid/flex declarations so every product card lines up evenly on desktop and mobile breakpoints.
• Test in Chrome, Firefox, Safari, and Edge to confirm no overlap, no gaps, and proper wrapping at common widths (320 px to 1440 px).
• Supply the updated code with clear comments, plus a brief summary of the change set so I can merge it smoothly into production.

If you’re comfortable wrangling CSS Grid or Flexbox and can turn this around promptly, let’s get it fixed.