🤔 Grid ou InternalGrid ?
#
GénéralitésIl peut être difficile de comprendre la différence entre l'InternalGrid
et la Grid
: le premier est pensé pour des blocs petits ou pour des alignements simples (une grille "interne", donc), tandis que le second a été créé pour placer des blocs plus gros côte à côte sur grand écran.
Ces deux composants peuvent être utilisés de concert : dans ce cas, la Grid
sera bien souvent le parent d'une ou plusieurs InternalGrid
.
InternalGrid
#
Dans quels cas utiliser Vous pouvez utiliser un composant InternalGrid pour :
- Aligner une icône et un texte ;
- Aligner plusieurs textes courts, des logos, etc ;
- Placer un élément dans un conteneur (centrage, ferré à gauche, droite…) ;
- Espacer des éléments pour prendre toute la largeur d'un conteneur ;
- Disposer de petits éléments selon une grille précise.
Grid
#
Dans quel cas utiliser Vous pouvez utiliser un composant Grid pour :
- Disposer de larges éléments ;
- Aligner de gros blocs sur grand écran tout en les laissant les uns sous les autres sur petit écran ;
- Offrir une expérience de lecture agréable avec un composant à la largeur limitée (la
Grid
fait au maximum 1400px de large, et embarque ses propres paddings) ; - Créer une grille de type "masonry" avec la propriété CSS
columns
.
note
Si aucun de ces deux composants ne correspond à votre besoin, nous vous encourageons à créer votre propre composant de grille : dans de nombreux cas, en ce qui concerne l'architecture visuelle de vos interfaces, vos besoins spécifiques seront bien mieux gérés par un composant fait sur mesure.