Utiliser une Grid

Vous voulez vraiment utiliser une Grid, pas de confusion avec le composant InternalGrid ? Pour vous en assurer, consultez la page Grid ou InternalGrid. Si vous êtes sûr(e) de vous, c'est parti !

3 choses à savoir sur le composant Grid

1. Elle fait 1400px de largeur maximum.
2. En-dessous d'une largeur de theme.screen.min.md (consultez la doc 🖌️ Constantes du thème pour connaître la largeur en pixels), la Grid place les enfants les uns sous les autres sans instruction CSS display ou column afin d'offrir une mise en page responsive pour des enfants larges.
3. Par défaut, la Grid ajoute des marges responsives à ses enfants.

Le displayType

La propriété la plus importante de la Grid est displayType : elle permet de définir les propriétés CSS display et column sur un écran d'une largeur theme.screen.min.md.

Props	Type ou valeurs autorisées	Valeur par défaut
displayType	flex, grid, column	flex

La valeur du displayType va définir l'application de plusieurs autres props : en mode flex, les props liées à grid et à column seront ignorées, et inversement.

Props	Fonction	displayType = flex	displayType = grid	displayType = column
columnNumber	Création de la grille	❌	✔️	✔️
gridTemplateColumns	Création de la grille	❌	✔️	❌
gridGap	Création de la grille	❌	✔️	✔️
flexDirection	Création de la grille	✔️	❌	❌
flexWrap	Création de la grille	✔️	❌	❌
childrenFlex	Taille des enfants	✔️	❌	❌
justifyContent	Alignement des enfants	✔️	❌	❌
justifyItems	Alignement des enfants	❌	✔️	❌
alignItems	Alignement des enfants	✔️	✔️	❌

En fonction de votre choix entre flex, grid et column, vous pourrez donc consulter au choix :

• La documentation sur le displayType="flex"
• La documentation sur le displayType="grid"
• La documentation sur le displayType="column"

note

Vous avez un doute sur la valeur du displayType ? Consultez notre aide CSS : flex ou grid pour choisir entre le flex et le grid. Le column permet quant à lui de placer un grand nombre d'enfants dans des colonnes, en collant les enfants verticalement pour occuper un minimum d'espace : il s'agit de la version CSS des grilles de type masonry.

Alignement et padding

Props	Type ou valeurs autorisées	Valeur par défaut
align	left, center, right	center
blockPadding	none, xs, sm, md, lg, xl	md

• La props align (à ne pas confondre avec alignItems) permet d'aligner le composant Grid à l'intérieur de son parent, à condition que la largeur du parent soit supérieure à 1400px (dans le cas contraire, la Grid prendra tout l'espace disponible).
• La props blockPadding permet de modifier le padding de la Grid (et non celui de ses enfants). La taille en pixels est celle des Spaces la doc 🖌️ Constantes du thème.