custom masonry on page archhives projets

2026-10-26 21:02:33 +01:00
parent bf8f265077
commit f4961e9679
4 changed files with 120 additions and 8 deletions
@@ -42,7 +42,22 @@ div.views-archives-projets{
    // seuil mobile. Une dernière rangée incomplète ne s'étire pas.
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
-    gap: $colsgap;
+    // Gouttière verticale portée par les items (margin-bottom), pas par le
+    // row-gap : avec le masonry JS, chaque rangée virtuelle de 8px ajouterait
+    // 32px de pas de quantification — un item peut « dépasser » de presque
+    // 40px dans son span. Avec row-gap: 0, l'arrondi résiduel tombe sous
+    // 8px. Sans JS, la marge produit la même gouttière que l'ancien gap.
+    column-gap: $colsgap;
+    row-gap: 0;
+    align-items: start;
+    >.views-row{
+      margin-bottom: $colsgap;
+      // Le whitespace du template crée une boîte de ligne anonyme (+16px)
+      // sous l'article. Un conteneur flex ignore les nœuds texte vides :
+      // la row fait exactement la hauteur de l'article.
+      display: flex;
+      flex-direction: column;
+    }
    @media #{$mobile}{
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }