CSS Pistes de Grille
Pistes de Grille CSS (Lignes et Colonnes)
À l'intérieur du conteneur de grille, vous définissez le nombre et la taille des colonnes et des lignes.
Pour cela, nous utiliserons les propriétés suivantes :
-
grid-template-columns- Définit le nombre et la largeur des colonnes dans la grille -
grid-template-rows- Définit le nombre et la hauteur des lignes dans la grille -
grid-template-areas- Définit comment afficher les colonnes et les lignes en utilisant des éléments de grille nommés
La Propriété grid-template-columns de CSS
La grid-template-columns définit le nombre et la largeur des colonnes dans la grille.
La valeur est une liste séparée par des espaces, où chaque valeur définit la largeur de la colonne correspondante.
Les valeurs courantes sont :
- Longueurs fixes (100px 300px 200px)
- Pourcentages (20% 60% 20%)
- unité fr (1fr 2fr 1fr)
- auto (auto auto auto)
- repeat() (repeat(3, 1fr))
- minmax() (minmax(80px, 1fr) 150px 150px)
CSS grid-template-columns : auto
Pour créer une mise en page de grille avec 3 colonnes de largeur égale, utilisez le mot-clé "auto".
Exemple
Créez une grille avec 3 colonnes de largeur égale :
.container {
display: grid;
grid-template-columns: auto auto auto;
} Résultat :
Colonnes de Grille avec Largeur Mixte
Pour créer une mise en page de grille avec 3 colonnes : 2 colonnes de largeur fixe et 1 colonne de taille "auto".
Exemple
Créez une grille avec une taille fixe pour les colonnes 1 et 2, et la colonne 3 avec une taille auto :
.container {
display: grid;
grid-template-columns: 80px 200px auto;
} Résultat :
Remarque : Si vous avez plus de 3 éléments de grille dans une grille de 3 colonnes, la grille ajoutera automatiquement de nouvelles lignes pour y placer les éléments.
Colonnes de Grille avec l'unité fr
L'unité fr signifie "fraction". Cette unité divise automatiquement l'espace disponible en fractions.
1fr prendra 1 fraction de l'espace disponible, tandis que 2fr prendra 2 fractions de l'espace disponible.
Exemple
Ici, chaque colonne occupera 33,3 % de la largeur du conteneur, la divisant également :
.container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
} Résultat :
Exemple
Ici, la deuxième colonne sera deux fois plus large que les autres :
.container {
display: grid;
grid-template-columns: 1fr 2fr 1fr;
} Résultat :
Colonnes de Grille avec la Fonction repeat()
La fonction CSS repeat() est utilisée pour répéter un ensemble de colonnes ou de lignes dans une grille.
Exemple
Utilisez repeat() pour créer trois colonnes de largeur égale dans une grille :
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
} Résultat :
Colonnes de Grille avec la Fonction minmax()
La fonction CSS minmax() est utilisée pour définir une plage de taille supérieure ou égale à une valeur minimale et inférieure ou égale à une valeur maximale.
Exemple
Utilisez minmax() pour définir que la première colonne a une largeur d'au moins 80px et peut croître jusqu'à 1fr :
.container {
display: grid;
grid-template-columns: minmax(80px, 1fr) 150px 150px;
} Résultat :
La Propriété grid-template-rows de CSS
La grid-template-rows définit le nombre et la hauteur des lignes dans la grille.
La valeur est une liste séparée par des espaces, où chaque valeur définit la hauteur de la ligne correspondante.
Les valeurs courantes sont :
- Longueurs fixes
- Pourcentages
- unité fr
- auto
- min-content
- max-content
- repeat()
- minmax()
- fit-content()
Exemple
Définissez la première ligne de la grille à 80px de hauteur et la deuxième ligne à 200px de hauteur :
.container {
display: grid;
grid-template-rows: 80px 200px;
} Résultat :
Remarquez que la première ligne de la grille ci-dessus fait 80px de hauteur et la deuxième ligne fait 200px de hauteur. Les lignes suivantes utiliseront auto par défaut.