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:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
@product-grid-items-per-row-layout-default: 2; @product-grid-items-per-row-layout-1-screen-s: 3; @product-grid-items-per-row-layout-1-screen-m: 4; @product-grid-items-per-row-layout-1-screen-l: 5; @product-grid-items-per-row-layout-2-left-screen-s: 3; @product-grid-items-per-row-layout-2-left-screen-m: 4; @product-grid-items-per-row-layout-2-left-screen-l: ''; @product-grid-items-per-row-layout-2-right-screen-s: 3; @product-grid-items-per-row-layout-2-right-screen-m: 4; @product-grid-items-per-row-layout-2-right-screen-l: ''; @product-grid-items-per-row-layout-3-screen-s: 3; @product-grid-items-per-row-layout-3-screen-m: ''; @product-grid-items-per-row-layout-3-screen-l: ''; |
Utiliser la fonction calc de CSS
Pour 4 produits par rangée:
|
1 2 3 4 5 |
.products-grid .product-items .product-item { -ms-flex: 0 0 calc(100% / 4); flex: 0 0 calc(100% / 4); max-width: calc(100% / 4); } |
Pour 1 produit par rangée en Mobile, 2 produits par rangée en Tablet, 4 produits par rangée en Desktop:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
// Normalement, media-query inutile pour le Mobile (mobile-first) @media (max-width: 767px) { .products-grid .product-items .product-item { -ms-flex: 0 0 calc(100% / 1); flex: 0 0 calc(100% / 1); max-width: calc(100% / 1); } } @media (min-width: 768px) and (max-width: 991px) { .products-grid .product-items .product-item { -ms-flex: 0 0 calc(100% / 2); flex: 0 0 calc(100% / 2); max-width: calc(100% / 2); } } @media (min-width: 992px) { .products-grid .product-items .product-item { -ms-flex: 0 0 calc(100% / 4); flex: 0 0 calc(100% / 4); max-width: calc(100% / 4); } } |
Petite subtilité pour les thèmes de merde qui n’utilisent pas Flexbox
Vous allez vous retrouver à devoir surcharger des choses de ce style:
|
1 2 3 4 5 6 7 8 9 10 11 |
.page-layout-1column { .products.wrapper.products-grid .product-items .product-item { width: calc((100% - 6%) / 4); &:nth-child(3n+1){ margin-left: 2%; } &:nth-child(4n+1){ margin-left: 0; } } } |
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%.