CSS / HTML выравнивание элементов в сетке элементов не отображается правильно

Этот код будет правильно выравнивать элементы 4 подряд, но испортит изображение, когда размер экрана увеличится и уменьшится

.products-grid li.item{
    width: 225px; // remove this line and add below style
    width:24%;
}
.products-grid .product-image{
    width: 225px; // remove this line and add below style
    width:100%;
}

Или вы можете использовать это

Чтобы изменить количество столбцов от 4 до 3 на странице категории, добавьте приведенный ниже код к вашему приложению/дизайну/frontend/your_package/your_theme/layout/local.xml

<catalog_category_default>
    <reference name="product_list">
        <action method="setColumnCount"><count>3</count></action>
    </reference>
</catalog_category_default>
<catalog_category_layered>
    <reference name="product_list">
        <action method="setColumnCount"><count>3</count></action>
    </reference>
</catalog_category_layered>

Теперь, чтобы выровнять элементы списка 3 в строке для всех экранов, правильно используйте приведенный ниже css

.products-grid li.item{
    width: 225px;
    float:left; //Remove this line
    display:inline; //Remove this line
    display:inline-block; //add this line
    margin-right:1px; // remove this line
}

Это приведет к тому, что для всех экранов будет установлено 3 элемента подряд, и поскольку на display установлен inline-block, margin будет автоматически добавляться к каждому элементу, чтобы правильно разместить его в строке.

Попробуйте это