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

Navigation interactive dans l’historique

← Modification précédente Modification suivante →

@@ Ligne 1 : / Ligne 1 : @@
-/* =========================================================
-   MiniCardv2 — layout uniforme
-   - 1 seule ligne
-   - largeur identique
-   - hauteur identique
-   - scroll horizontal si dépassement
-   - 100% compatible TemplateStyles
-   ========================================================= */
 .minicardv2-container{
-   display:flex;
+   display:grid;
-  flex-wrap:nowrap;      /* jamais de retour ligne */
    gap:.9rem;
@@ Ligne 17 : / Ligne 7 : @@
    box-sizing:border-box;
-   overflow-x:auto;
+   /* Colonnes harmonisées, responsive */
-   overflow-y:hidden;
+  grid-template-columns:repeat(auto-fit, minmax(170px, 1fr));
+   align-items:stretch;
 }
-/* ===== Taille UNIFORME des tuiles ===== */
+/* S'assure que le bouton remplit bien sa "cellule" */
 .minicardv2-container > .button-link{
-   flex:0 0 190px;        /* largeur FIXE */
+   width:100%;
-  height:72px;           /* hauteur FIXE */
-  box-sizing:border-box;
 }
-/* Le lien remplit entièrement la tuile */
+/* (optionnel) si tu veux une hauteur identique */
-.minicardv2-container > .button-link > .button-link__link{
+.minicardv2-container > .button-link .button-link__link{
-  width:100%;
    height:100%;
-  display:flex;
-  align-items:center;
-  justify-content:center;
-  padding:0;
-  box-sizing:border-box;
-}
-/* Icônes / images toujours contenues */
-.minicardv2-container img{
-  max-height:65%;
-  width:auto;
 }