Magento2 Product List – How to Change Listing Per Page Option

You can do that if you create new module to override this block: vendor\magento\module-catalog\Block\Product\ListProduct.php

to override this block, you need to create di.xml at app\code\Vendor\Module_Name\etc

di.xml content:

<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:ObjectManager/etc/config.xsd">
    <preference for="Magento\Catalog\Block\Product\ListProduct" type="Vendor\Module_Name\Block\Product\ListProduct" />
</config>

Create new file name ListProduct.php at app\code\Vendor\Module_Name\Block\Product

ListProduct.php content:

namespace Vendor\Module_Name\Block\Product;
class ListProduct extends \Magento\Catalog\Block\Product\ListProduct
{
    public function getProductDetailsHtml(\Magento\Catalog\Model\Product $product)
    {
        $html = $this->getLayout()->createBlock('Magento\Framework\View\Element\Template')->setProduct($product)->setTemplate('Vendor_ModuleName::test.phtml')->toHtml();
        $renderer = $this->getDetailsRenderer($product->getTypeId());
        if ($renderer) {
            $renderer->setProduct($product);
            return $html.$renderer->toHtml();
        }
        return '';
    }
}

You can change block Magento\Framework\View\Element\Template to your block

create test.phtml file at app\code\Vendor\Module_Name\view\frontend\templates

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