What Is a Catalog Grid Layout?
The number of columns on a product listing page should adapt to both screen size and product count. Too many columns crushes product info on mobile, while too few leaves a desktop screen looking sparse. This calculator recommends a balanced column and row structure based on your product count and device type.
Default Columns by Device
Mobile defaults to 2 columns, tablet scales up to 4 when there are many items, and desktop expands from 4 to 6 columns depending on product count. When you have fewer products than the recommended column count, columns are automatically reduced to match so you never end up with empty grid cells.
Applying It in Practice
The calculated column count maps directly to CSS Grid's grid-template-columns: repeat(N, 1fr). The card width percentage is handy for setting image aspect ratios without breaking the layout. If your category pages have widely varying product counts, apply this logic separately at each responsive breakpoint.
Frequently Asked Questions
Two columns work best on mobile. It keeps product images and text readable while still showing several items on one screen.
The calculator automatically reduces the column count to match your product count so you don't end up with empty grid cells.