Utiliser les variables mises à disposition par Magento 2

Si votre thème hérite de blank: dans le fichier @product-grid-items-per-row-layout-2-left-screen-s (que vous devrez surcharger dans votre thème), modifiez les valeurs des variables suivantes:

Utiliser la fonction calc de CSS

Pour 4 produits par rangée:

Pour 1 produit par rangée en Mobile, 2 produits par rangée en Tablet, 4 produits par rangée en Desktop:

Petite subtilité pour les thèmes de merde qui n’utilisent pas Flexbox

Vous allez vous retrouver à devoir surcharger des choses de ce style:

Dans width: calc((100% - 6%) / 4);, la valeur de 6% correspond à la somme des valeurs des marges margin-left apposées pour une rangée donnée et la valeur 4 au nombre de produits attendus pour une rangée.

Dans mon exemple, j’ai par exemple 2% de marge entre mes produits. 4 produits par rangées = 3x la marge de séparation de 2% = 6%.