Flexbox – Simulation d’auto-fit
Mise en page flexible simulant l’auto-ajustement de colonnes avec flex-wrap et min-width pour reproduire le comportement de Grid.
Modifié le 07/10/2025 15:12
Débogage visuel d’une grille CSS
Page interactive permettant d’activer différentes classes CSS pour visualiser et comprendre la structure réelle d’une grille.
Modifié le 07/10/2025 16:03
Flex & Grid – Hauteur automatique des cartes
flex-grid-hauteur-cartes.shtml
Comparaison entre Flex et Grid pour uniformiser la hauteur des cartes produits et aligner les boutons d’action.
Modifié le 07/10/2025 15:12
Mise en page moderne avec Flexbox
Démonstration d'une structure de page complète réalisée uniquement en Flexbox, avec répartition et ajustements responsives.
Modifié le 07/10/2025 15:12
Mise en page classique avec floats
Exemple d'organisation de page utilisant les flottants, méthode historique précédant Flexbox et Grid.
Modifié le 07/10/2025 15:12
Espacement : gap vs space-evenly
Comparaison entre gap et space-evenly pour la gestion des espacements dans des menus en Flex et Grid.
Modifié le 07/10/2025 15:12
CSS Grid – Auto-fit adaptatif
Démonstration du comportement responsive avec repeat(auto-fit, minmax()), pour ajuster le nombre de colonnes selon la largeur.
Modifié le 07/10/2025 15:12
Combiner CSS Grid et Flexbox
Page illustrant la complémentarité entre CSS Grid pour la structure et Flexbox pour le contenu interne.
Modifié le 07/10/2025 15:12
Grille asymétrique et superpositions
grid-overlap-magazine.shtml
Exemple de mise en page type magazine avec superposition d’éléments et effets de profondeur à l’aide de CSS Grid.
Modifié le 07/10/2025 15:12
Alignement individuel avec justify-self et align-self
Démonstration du positionnement indépendant d’éléments dans une grille CSS via justify-self et align-self.
Modifié le 07/10/2025 15:12