How to modify magento 2 to show 3 items per row in product grid instead of the default 4?

I tried to play with /var/www/magento2/vendor/magento/theme-frontend-luma/Magento_Catalog/web/css/source/module/_listings.less but nothing changed.

I've restarted apache2... I have flushed magento2 cache ... I have deleted all folders under /magento2/var/cache ... but still showing 4 items per row!!!

Any suggestions?

3 Answers 3


I used CSS trick to change the number of appearances in a row

I just widened the li product-item and this worked for me.

        width: 45%;

Add width:31.439% for li tag with class name : item product product-item

enter image description here


The thing is that Magento defines the number of product/row in their css by having a width defined. The only way to adjust that is to overwrite that line of css within your app/designit/vendor/theme/web/css/source/_theme.less

If you want to link that to a setting in your backend i'm afraid you are limited to inline css.

The answer from sriharsha C R is a good starting point even though i highly recommend of overwrite the whole .phtml fille and add a new class to that part of the html and add that class in your app/designit/vendor/theme/web/css/source/_extend.less with your own width to assure if they change the class names it will still work.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.