4

How to display 3 items per row on products/category pages for 2 column Magento 2?

5

Change style in _listing.less in Magento_Catalog\web\css\source\module path

.media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen__l) {
  .products-grid {
      .product-item {
          width: 100%/5;
      }
   }
}

to

.media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen__l) {
    .page-products.page-layout-2columns-left,
    .page-products.page-layout-2columns-right {
        .products-grid .product-item {
            width: 100%/3;
        }
    }
}
  • i try but this is not working for 2 column left i have also try .page-products.page-layout-1column { .products-grid { .product-item { width: 100%/3; } } } – Sagar Dobariya Nov 28 '16 at 11:21
  • Try this .page-products.page-layout-2columns-left .products-grid { .product-item { width: 100%/3; } } – Dipesh Rangani Nov 28 '16 at 11:27
  • Try above updated code, this will work. – Dipesh Rangani Nov 29 '17 at 10:47
  • What if I only want this in search results? Could anyone please help me with this. – Siva Apr 8 at 11:24
  • Above code will work on default Magento setup as well, But if you have change layout from 2columns to 1column or 3columns in this case you have to add this selector .page-products.page-layout-1column or .page-products.page-layout-3columns respected. – Dipesh Rangani Apr 8 at 12:49

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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