Magento 2 Catalog Page - changing number of items per row

Question

On Catalog/Listing page, by default, the products are showing as 4 items per row whereas I want to show 3 items per row, how can I change this?

Answer 1

You can add this on your css :

.products-grid .product-item,
.page-products .products-grid .product-item {
width: 48%;
margin-left: 4%;
margin-bottom: 4%;
}    



@media (min-width: 768px), print {
.page-layout-2columns-left .column.main {
    width: 77.16666667%;
}
.page-layout-2columns-left .sidebar-main,
.page-layout-2columns-left .sidebar-additional {
    width: 22.83333333%;
}
.page-products .products-grid .product-item,
.page-products .products-grid .product-item:nth-child(4n + 1) {
    width: 32%;
    margin-left: 2%;
    margin-bottom: 2%;
}
.page-products .products-grid .product-item:nth-child(3n+1) {
    margin-left: 0;
}
}
@media (max-width: 767px) {
.products-grid .product-item:nth-child(2n+1),
.page-products .products-grid .product-item:nth-child(2n+1) {
    margin-left: 0;
}
}