Conteneur de grille CSS
Essayez-le vous-même »
Conteneur de grille
Pour qu’un élément HTML se comporte comme un conteneur de grille, vous devez définir le display propriété à
gridinline-grid.
Les conteneurs de grille sont constitués d’éléments de grille, placés à l’intérieur de colonnes et de lignes.
La propriété grid-template-columns
Le grid-template-columns La propriété définit le nombre de colonnes dans votre disposition de grille et peut définir la largeur de chaque colonne.
La valeur est une liste séparée par des espaces, où chaque valeur définit la largeur de la colonne respective.
Si vous souhaitez que votre disposition en grille contienne 4 colonnes, spécifiez la largeur des 4 colonnes, ou « auto » si toutes les colonnes doivent avoir la même largeur.
Exemple
Faites une grille avec 4 colonnes :
.grid-container {
affichage : grille ;
grille-modèle-colonnes : auto auto auto auto ;
}
Essayez-le vous-même »
Note: Si vous avez plus de 4 éléments dans une grille de 4 colonnes, la grille ajoutera automatiquement une nouvelle ligne pour mettre les éléments.
Le grid-template-columns La propriété peut également être utilisée pour spécifier la taille (largeur) des colonnes.
Exemple
Définissez une taille pour les 4 colonnes :
.grid-container {
affichage : grille ;
grille-modèle-colonnes : 80px 200px auto 40px ;
}
Essayez-le vous-même »
La propriété grid-template-rows
Le grid-template-rows La propriété définit la hauteur de chaque ligne.
La valeur est une liste séparée par des espaces, où chaque valeur définit la hauteur de la ligne respective :
Exemple
.grid-container {
affichage : grille ;
grille-modèle-lignes : 80px 200px ;
}
Essayez-le vous-même »
La propriété Justifier-Contenu
Le justify-content La propriété est utilisée pour aligner toute la grille à l’intérieur du conteneur.
Note: La largeur totale de la grille doit être inférieure à la largeur du conteneur pour la justify-content propriété d’avoir un effet.
Exemple
.grid-container {
affichage : grille ;
justifier-contenu : espacer uniformément ;
}
Essayez-le vous-même »
Exemple
.grid-container {
affichage : grille ;
justifier-contenu : espace autour ;
}
Essayez-le vous-même »
Exemple
.grid-container {
affichage : grille ;
justifier-contenu : espace entre ;
}
Essayez-le vous-même »
La propriété align-content
Le align-content la propriété sert à
verticalement aligner toute la grille à l’intérieur du récipient.
Note: La hauteur totale de la grille doit être inférieure à la hauteur du conteneur pour la align-content propriété d’avoir un effet.
Exemple
.grid-container {
affichage : grille ;
hauteur : 400px ;
aligner-contenu : centrer ;
}
Essayez-le vous-même »
Exemple
.grid-container {
affichage : grille ;
hauteur : 400px ;
align-content : espacer uniformément ;
}
Essayez-le vous-même »
Exemple
.grid-container {
affichage : grille ;
hauteur : 400px ;
align-content : espace autour ;
}
Essayez-le vous-même »
Exemple
.grid-container {
affichage : grille ;
hauteur : 400px ;
align-content : espace entre ;
}
Essayez-le vous-même »
Exemple
.grid-container {
affichage : grille ;
hauteur : 400px ;
align-content : début ;
}
Essayez-le vous-même »
Exemple
.grid-container {
affichage : grille ;
hauteur : 400px ;
align-content : fin ;
}
Essayez-le vous-même »
#Conteneur #grille #CSS