CSS Conteneur de Grille

Conteneur de Grille CSS

Un conteneur de grille contient un ou plusieurs éléments de grille disposés en colonnes et en lignes.

Tous les éléments enfants directs d'un conteneur de grille deviennent automatiquement des éléments de grille.

Un élément devient un conteneur de grille lorsque sa propriété display est définie sur grid ou inline-grid .

L'élément <div> devient un conteneur de grille lorsque sa propriété display est définie sur grid ou inline-grid .

Utilisez display: grid pour créer un conteneur de grille de niveau bloc :

 .container { 
 display: grid; 
 } 

Résultat :

Utilisez display: inline-grid pour créer un conteneur de grille en ligne :

 .container { 
 display: inline-grid; 
 } 

Résultat :

Propriété	Description
align-content	Aligne verticalement les éléments de grille à l'intérieur du conteneur
align-items	Spécifie l'alignement par défaut des éléments à l'intérieur d'un conteneur flexbox ou grille
display	Spécifie le comportement d'affichage (le type de boîte de rendu) d'un élément
column-gap	Spécifie l'écart entre les colonnes
gap	Propriété abrégée pour row-gap et column-gap
grid	Propriété abrégée pour grid-template-rows, grid-template-columns, grid-template-areas, grid-auto-rows, grid-auto-columns et grid-auto-flow
grid-auto-columns	Spécifie une taille de colonne par défaut
grid-auto-flow	Spécifie comment les éléments auto-placés sont insérés dans la grille
grid-auto-rows	Spécifie une taille de ligne par défaut
grid-template	Propriété abrégée pour grid-template-rows , grid-template-columns et grid-areas
grid-template-areas	Spécifie comment afficher les colonnes et les lignes en utilisant des éléments de grille nommés
grid-template-columns	Spécifie la taille des colonnes et le nombre de colonnes dans une mise en page de grille
grid-template-rows	Spécifie la taille des lignes dans une mise en page de grille
justify-content	Aligne horizontalement les éléments de grille à l'intérieur du conteneur
place-content	Propriété abrégée pour align-content et justify-content
row-gap	Spécifie l'écart entre les lignes de la grille