« Modèle:MiniCard/styles.css » : différence entre les versions

Navigation interactive dans l’historique

← Modification précédente Modification suivante →

@@ Ligne 5 : / Ligne 5 : @@
 /* Conteneur de grille */
 .minicard-grid {
-     display: grid;
+     display: flex;
+    flex-wrap: wrap;
      gap: 12px;
-    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
-    grid-auto-rows: 60px;
      margin: 0 auto 24px auto;
      width: 100%;
+    /* Les enfants se partagent l'espace équitablement sur chaque ligne */
+    justify-content: flex-start;
 }
@@ Ligne 25 : / Ligne 26 : @@
      align-items: center;
      height: 60px;
-    width: 100%;
      box-sizing: border-box;
+    /* Taille de base : ~6 cartes par ligne, avec le gap déduit */
+    flex: 1 1 calc((100% - 5 * 12px) / 6);
+    min-width: 130px;
 }
@@ Ligne 170 : / Ligne 173 : @@
 @media (max-width: 768px) {
      .minicard-grid {
-        grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
-        grid-auto-rows: 52px;
          gap: 8px;
      }
@@ Ligne 178 : / Ligne 179 : @@
          font-size: 0.85rem;
          height: 52px;
+        /* ~3 cartes par ligne sur tablette */
+        flex: 1 1 calc((100% - 2 * 8px) / 3);
+        min-width: 120px;
      }
@@ Ligne 191 : / Ligne 195 : @@
 @media (max-width: 480px) {
      .minicard-grid {
-        grid-template-columns: repeat(2, 1fr);
          gap: 6px;
+    }
+    .minicard {
+        /* 2 cartes par ligne sur mobile */
+        flex: 1 1 calc((100% - 6px) / 2);
+        min-width: 0;
      }
 }