test boutons

styles.css

@@ -221,27 +221,13 @@ nav > ul li:hover .sous {
   gap: 5%;
   justify-content: space-between; /* Center the items within their respective columns */
 }
-.grid-container-4-boxes {
-  display: grid;
-  grid-template-columns: repeat(4, 1fr);
-  gap: 10%;
-  justify-content: space-between; /* Center the items within their respective columns */
-}
-
-.grid-container-4-boxes button {
-  width: 100%; /* Chaque bouton occupe 100% de la largeur de sa colonne */
-  padding: 10px; /* Ajoute un remplissage pour l'espace interne du bouton */
-}
 
-.grid-container-2x2 {
+.grid-container-4-boxes {
   display: grid;
-  grid-template-columns: repeat(2, 1fr);
-  gap: 10px; /* Espacement entre les boutons */
-}
-
-.grid-container-2x2 button {
-  padding: 10px; /* Ajoute un remplissage pour l'espace interne du bouton */
-  width: 100%; /* Chaque bouton occupe 100% de la largeur de sa colonne */
+  grid-template-columns: repeat(4, auto); /* Chaque bouton occupera la largeur minimale nécessaire */
+  gap: 10%; /* Espacement entre les colonnes */
+  justify-content: space-between; /* Espacement égal entre les colonnes */
+  grid-auto-flow: column; /* Place les éléments dans des colonnes plutôt que des lignes */
 }
 
 .column2 {