Conteneur de grille CSS
1
2
3
4
5
6
sept
8
Conteneur de grille
Pour qu'un élément HTML se comporte comme un conteneur de grille, vous devez définir la displaypropriété sur
gridou inline-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
La grid-template-columnsproprié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 {
display: grid;
grid-template-columns: auto auto auto auto;
}
Remarque : 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.
La grid-template-columnsproprié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 {
display: grid;
grid-template-columns: 80px 200px auto 40px;
}
La propriété grid-template-rows
La grid-template-rowspropriété définit la hauteur de chaque ligne.
1
2
3
4
5
6
sept
8
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 {
display: grid;
grid-template-rows: 80px 200px;
}
La propriété Justifier-Contenu
La justify-contentpropriété est utilisée pour aligner toute la grille à l'intérieur du conteneur.
1
2
3
4
5
6
Remarque : La largeur totale de la grille doit être inférieure à la largeur du conteneur pour que la justify-contentpropriété ait un effet.
Exemple
.grid-container {
display: grid;
justify-content: space-evenly;
}
Exemple
.grid-container {
display: grid;
justify-content: space-around;
}
Exemple
.grid-container {
display: grid;
justify-content: space-between;
}
Exemple
.grid-container {
display: grid;
justify-content: center;
}
Exemple
.grid-container {
display: grid;
justify-content: start;
}
Exemple
.grid-container {
display: grid;
justify-content: end;
}
La propriété align-content
La align-contentpropriété est utilisée pour aligner
verticalement toute la grille à l'intérieur du conteneur.
1
2
3
4
5
6
Remarque : La hauteur totale de la grille doit être inférieure à la hauteur du conteneur pour que la align-contentpropriété ait un effet.
Exemple
.grid-container {
display: grid;
height: 400px;
align-content: center;
}
Exemple
.grid-container {
display: grid;
height: 400px;
align-content: space-evenly;
}
Exemple
.grid-container {
display: grid;
height: 400px;
align-content: space-around;
}
Exemple
.grid-container {
display: grid;
height: 400px;
align-content: space-between;
}
Exemple
.grid-container {
display: grid;
height: 400px;
align-content: start;
}
Exemple
.grid-container {
display: grid;
height: 400px;
align-content: end;
}