Magento – Magento 2 : Change Number of Items Per Row set From Admin for Different Categories

admincategorymagento2

I'm trying to change number of items per row in product listing page.

I want to set different items per row for differant categories from: "admin panel > category > design > layout update xml"

Magento 1, Like this : < action method="setColumnCount"> < count> 4 < /count>< /action>

Above code I want to use in magento 2.

Best Answer

I struggled with a similar problem. My aim was to display no more than 4 products per row, using a custom theme which inherits from the blank theme.

In order to edit columns for regular catalog pages, you must copy the following directory:

[install_dir]/vendor/magento/theme-frontend-blank/Magento_Catalog/web/css/source/module/_listings.less

to your theme directory:

[install_dir]/app/design/frontend/[vendor_name]/[theme_name]/Magento_Catalog/web/css/source/module/_listings.less

If you would like to edit the widget columns as well, then you copy the following:

[install_dir]/vendor/magento/theme-frontend-blank/Magento_Catalog/web/css/source/_widgets.less

to your theme directory:

[install_dir]/app/design/frontend/[vendor_name]/[theme_name]/Magento_Catalog/web/css/source/_widgets.less

and adjust styles accordingly.

Here is an example of the CSS I used to neatly display 4 columns per row:

.page-layout-1column .block.widget .products-grid .product-item {
    margin-left: calc(~'(100% - 5 * (100%/5)) / 4');
    width: 100%/4;

    &:nth-child(4n + 1) {
        margin-left: calc(~'(100% - 5 * (100%/5)) / 4');
    }

    &:nth-child(5n + 1) {
        margin-left: 0;
    }
}

I won't display the whole code, because you'll need to adjust it for your particular needs.

Related Topic