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

Navigation interactive dans l’historique

← Modification précédente Modification suivante →

@@ Ligne 3 : / Ligne 3 : @@
     ============================================================================= */
-/* Conteneur de grille */
+/* Conteneur de grille - 6 colonnes fixes */
 .minicard-grid {
-     display: flex;
+     display: grid;
-    flex-wrap: wrap;
      gap: 12px;
+    grid-template-columns: repeat(6, 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;
 }
-/* MiniCard individuelle */
 .minicard {
      position: relative;
@@ Ligne 26 : / Ligne 24 : @@
      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 166 : @@
 }
-/* Responsive tablette */
+/* Responsive - 4 colonnes */
-@media (max-width: 768px) {
+@media (max-width: 900px) {
      .minicard-grid {
+        grid-template-columns: repeat(4, 1fr);
+        gap: 8px;
+    }
+    .minicard {
+        font-size: 0.9rem;
+    }
+}
+/* Responsive - 3 colonnes */
+@media (max-width: 650px) {
+    .minicard-grid {
+        grid-template-columns: repeat(3, 1fr);
+        grid-auto-rows: 52px;
          gap: 8px;
      }
@@ Ligne 179 : / Ligne 189 : @@
          font-size: 0.85rem;
          height: 52px;
-        /* ~3 cartes par ligne sur tablette */
-        flex: 1 1 calc((100% - 2 * 8px) / 3);
-        min-width: 120px;
      }
@@ Ligne 187 : / Ligne 194 : @@
      .minicard-link-external,
      .minicard-text {
-         padding: 0 12px;
+         padding: 0 10px;
          font-size: 0.85rem;
      }
 }
-/* Responsive mobile */
+/* Responsive - 2 colonnes */
-@media (max-width: 480px) {
+@media (max-width: 420px) {
      .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;
      }
 }