Skip to main content

🤔 Grid ou InternalGrid ?

Généralités#

Il 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.

Dans quels cas utiliser InternalGrid#

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.

Dans quel cas utiliser Grid#

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.