Give one product room to stand out, then let the rest of the collection fill the grid around it. Using Divi 5‘s CSS Grid Editor, you’ll build an outdoor gear layout whose first card spans two columns. Large photos and compact price badges carry the design from four columns on Desktop to two on Tablet and one on Phone.
You’ll design one card and use the Loop Builder to repeat it for 19 WooCommerce products. Each card gets its own image, category, name, price, and product link, so you can change the shared design without rebuilding every card.
Before starting, update Divi 5 and activate WooCommerce. Add published products with names, prices, product categories, and featured images. This example uses 19 products, but you can use a smaller catalog while following along. Include a sale-priced product if you want to check how the current-price field behaves. Payment and shipping setup are not needed to preview the grid.
