Magento 2 - Change amount of products per row in category view

Question

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.

Answer 1

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:

vendor/magento/theme-frontend-luma/module-catalog/web/css/source/module/_listings.less

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

Answer 2

I solved it by copying the file

vendor/magento/theme-frontend-luma/module-catalog/web/css/source/module/_listings.less

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');
            }
        }
    }