Currently there are showing 4 products per row in the category view.

How can I make it show 3 products per row instead?

I found this answer. It says there is a file Magento_Catalog\web\css\source\module\_listing.less but I searched in vendor\magento\module-catalog\view\frontend\web folder and there is not even a css folder inside of it.

2 Answers 2


The answer you linked to is correct, but you're looking in the wrong place.

You need to look in the theme folder, for example, if you are using Luma:


You should really be creating/editing this file in your local theme.


I solved it by copying the file


to my theme at THEME/Magento_Theme/web/css/source/module/_listing.less and adding my code under the media-width mixin:

.media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen__l) {

    // Change Products per row from 4 to 3 in custom page layout
    // ---------------------------------------------------------
    .page-products.page-layout-2columns-left {
        .products-grid {
            .product-item {
                margin-left: 2%;
                padding: 5px;
                width: calc(~'(100% - 6%)/3');

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.