How is a frontend product grid implemented in HTML?

dmitrii_fediuk · March 6, 2016, 7:55pm

The frontend product grid is implemented in HTML as an ordered list of products:

magento/magento2/blob/487f5f45/app/code/Magento/Catalog/view/frontend/templates/product/list.phtml#L46-L49


<ol class="products list items product-items">
    <?php /** @var $_product \Magento\Catalog\Model\Product */ ?>
    <?php foreach ($_productCollection as $_product): ?>
        <?php /* @escapeNotVerified */ echo($iterator++ == 1) ? '<li class="item product product-item">' : '</li><li class="item product product-item">' ?>

The number of products in a row (number of a product grid’s columns) is automatically adjusted to a browser window’s size.

4 products in a row

github.com

magento/magento2/blob/487f5f45/app/design/frontend/Magento/luma/Magento_Catalog/web/css/source/module/_listings.less#L427-L435


.product-item {
    margin-left: calc(~"(100% - 4 * 24.439%) / 3");
    padding: 0;
    width: 24.439%;


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

3 products in a row

github.com

magento/magento2/blob/487f5f45/app/design/frontend/Magento/luma/Magento_Catalog/web/css/source/module/_listings.less#L371-L378


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