diff --git a/styles.css b/styles.css index 2d02cb634a93f6d0e0a930eba81c8bb9bfb83b18..de6aa8a4dd939a82ab6615995b71c32fb7d388ee 100644 --- a/styles.css +++ b/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 {