G
R
I
D
B
X
G
R
I
D
B
X
CSS Grid layout est un module CSS qui permet de créer des mises en page en divisant l'espace d'affichage avec un modèle de disposition en grille.
L'utilisation ce fait avec la déclaration “display” + une propriété comme “grid”...
Voici un exemple de code pour la bannière en Grid :
Lien CodePen
See the Pen pVQXEB by guillaume (@Gyoz) on CodePen.
Et un autre exemple, celui de la mosaïque en Grid et Flex :
Lien CodePen
See the Pen by Omni (@omniprezz) on CodePen.
Documentation Css Grid :
Cheatsheet Grid
Doc MDN Grid
Learn the CSS Grid!
Le module de mise en page des boîtes flexibles CSS, communément appelé "Flexbox", est un modèle de disposition des éléments dans une seule dimension. (ligne ou colonne).
L'utilisation ce fait avec la déclaration “display” + une propriété comme “flex”...
Voici un exemple du code pour faire une carte en Flex:
Lien CodePen
See the Pen BxvdPy by Vanoux (@Vanoux) on CodePen.
Documentation FlexBox :
Cheatsheet FlexBox
Guide FlexBox
FlexBox playground!
** Conçu pour disposer des items dans 2 dimensions : par rangées ET colonnes. **
UTILISATION BI - DIMENSIONNELLE
Possibilité d'organiser des pages complexes de façon simple et maintenable. Grid est plutôt destiné aux mises en pages à plus grande échelle grâce aux grilles qui permettent aux items de se placer automatiquements dans les cellules définies par cette grille ou bien contrôler leur positionnement en utilisant les lignes et zones de template.
Grâce à une capacité étendue plus puissante, il permet une organisation du contenu et donne aux développeurs le contrôle des écrans.
** Conçu fondamentalement pour disposer des items dans une dimension unique : sur une rangée (rangées par rangées) OU sur une colonne (colonne par colonne). **
UTILISATION UNI - DIMENSIONNELLE
La mise en page Flexbox est plus appropriée pour composants d'une application et les mises en pages à petites échelles.
Affiche des items de manière égale et flexible.
Il est très bien reconnu par les navigateurs et il est considéré comme la meilleure méthode de positionnement en CSS.
Flexbox et CssGrid sont 2 outils précieux et complémentaires.
Les contenus de la grille Grid peuvent être imbriqués ou mélangés avec des conteneurs Flex pour créer des mises en pages plus complexes.
Bien utilisés, on a plus besoin de recourir à des frameworks CSS géants et autres bidouillages CSS!
Oblige et permet de voir d'un oeil neuf l'espace du navigateur.