CSS Grid vs Flex-Box
Histoire
Les premières ébauches de Flex-Box Layout datent de 2009, tandis que Grid Layout date de 2004.
En effet, c'est dans les années 2000, avec la multiplication des résolution d'écrans, que les limites de CSS2 ont été atteintes.
Il fallait créer de nouvelles propriétés css capables de s'adapter dynamiquement a tous les écrans.
Grid? Flex? Qu'est-ce que c'est ???
Grid est un mode de mise en page permettant d'aligner des éléments sous forme de colonnes et de lignes.
Flex est un mode de mise en page permettant un comportement prévisible des éléments sur différentes tailles d'écrans.
Flexbox est fait pour les layouts unidimensionnels, CSS Grid est fait pour les layouts en 2 dimensions.
Utilisation
Tout simplement en appliquant la déclaration display: grid ou display: flex à un élément conteneur qui constituera la trame générale, il deviendra un "grid-container" ou "flex-container" et ses enfants directs des "grid-items" ou des "flex-items".
Flex et Grid sont complémentaires!! Par ex, il est tout à fait envisageable d'utiliser flex à l'intérieur d'un grid-items.
Compatibilité des navigateurs
Flex est très bien supporté sur la majorité des navigateurs, y compris sur mobile.
Grid est très bien supporté sur la majorité des navigateurs, sauf Opera Mini sur mobile qui ne le supporte pas du tout.
Comment les comparer ??
Rien de mieux que la pratique pour apprendre. Afin de tester les principales propriétés de Grid et Flex, nous avons codé 2 utilitaires qui permettent de les tester en live.
Comment ca marche?
Appuyez sur les boutons plus et moins pour ajouter ou enlever des div
Appuyez sur le sélecteur display et choisissez display: grid, flex ou flex-inline(suivant le mode a tester)
Utilisez les flèches Haut et Bas sur les input pour modifier les valeurs
