Dans un contexte CSS responsive, grid-template-columns est une propriété CSS puissante utilisée avec **CSS Grid Layout** pour définir la disposition des colonnes dans une grille.
Elle permet de spécifier le nombre, la taille et le comportement des colonnes dans un conteneur de grille. Voici une explication détaillée de son fonctionnement avec des exemples variés.
1. **Comprendre `grid-template-columns La propriété grid-template-columns permet de définir la largeur des colonnes dans une grille. Vous pouvez utiliser des unités de mesure variées telles que `px`, `%`, `fr` (fraction), `auto`, et des mots-clés comme `min-content` et `max-content`.
2. **Syntaxe de Base**
grid-template-columns: [valeur] [valeur] ...;
- Chaque valeur dans la liste représente la taille d'une colonne dans la grille. - Les valeurs peuvent être de tailles absolues (`px`, `em`), relatives (`%`), des fractions (`fr`), ou automatiques (`auto`).
3. **Exemples d'Utilisation** # Exemple 1: **Définir des Colonnes de Tailles Fixes**
.container {
display: grid;
grid-template-columns: 100px 200px 150px;
}
Dans cet exemple, le conteneur de grille aura trois colonnes de largeurs fixes : 100 pixels, 200 pixels, et 150 pixels respectivement.
# Exemple 2: **Utiliser des Fractions (`fr`)**
.container {
display: grid;
grid-template-columns: 1fr 2fr 1fr;
}
- Ici, la grille est divisée en quatre parties égales (`1fr + 2fr + 1fr = 4fr`).
- La première colonne occupe `1/4` de l'espace disponible, la deuxième colonne `2/4` (ou `1/2`), et la troisième colonne `1/4`.
# Exemple 3: **Combiner Tailles Fixes et Fractions**
.container {
display: grid;
grid-template-columns: 150px 2fr 1fr;
}
- La première colonne a une largeur fixe de 150 pixels.
- Les colonnes suivantes utilisent la taille fractionnelle, où la deuxième colonne est deux fois plus large que la troisième.
# Exemple 4: **Colonnes Automatiques avec `auto
.container {
display: grid;
grid-template-columns: auto auto auto;
}
- Chaque colonne prendra seulement l'espace nécessaire pour s'adapter à son contenu
# Exemple 5: **Utiliser des `minmax()` pour une Grille Responsive**
.container {
display: grid;
grid-template-columns: repeat(3, minmax(100px, 1fr));
}
- Utilise la fonction minmax() pour définir la taille minimale et maximale des colonnes.
- Chaque colonne aura une taille minimale de `100px` et peut s'étendre jusqu'à `1fr` (une fraction de l'espace disponible).
# Exemple 6: **Grille Répétée avec `repeat()
.container {
display: grid;
grid-template-columns: repeat(4, 1fr);
}
- Utilise la fonction repeat() pour créer une grille avec 4 colonnes, chacune occupant une fraction égale (`1fr`) de l'espace disponible.
# Exemple 7: **Grille Auto-Adaptative avec `auto-fit` et `minmax()
.container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
- auto-fit remplit automatiquement la grille avec autant de colonnes qu'il peut en fonction de l'espace disponible. - Les colonnes auront une taille minimale de `150px` et s'étendront jusqu'à remplir l'espace disponible (`1fr`).
# Exemple 8: **Mélange de Unités pour une Grille Complexe**
.container {
display: grid;
grid-template-columns: 200px 1fr 3fr min-content;
}
- La première colonne a une largeur fixe de `200px`.
- La deuxième colonne utilise `1fr` pour occuper une fraction de l'espace disponible.
- La troisième colonne occupe `3fr`, soit trois fois plus d'espace que la deuxième colonne.
- La dernière colonne prend seulement l'espace nécessaire pour son contenu avec `min-content`.
. **Utilisation de `grid-template-columns` pour des Designs Responsives** Pour créer des mises en page responsives, vous pouvez combiner **CSS Grid** avec des **Media Queries** :
.container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 10px;
}
@media (max-width: 768px) {
.container {
grid-template-columns: 1fr;
}
}
- Sur les écrans plus larges, la grille ajuste le nombre de colonnes en fonction de l'espace disponible, chaque colonne ayant au moins `200px`. - Sur les écrans plus petits (moins de `768px` de large), la grille passe à une seule colonne (`1fr`), ce qui est idéal pour les appareils mobiles.
5. **Conclusion** La propriété grid-template-columns est extrêmement versatile et puissante pour créer des mises en page flexibles et responsives avec CSS Grid. Elle vous permet de contrôler précisément le nombre et la taille des colonnes dans une grille, en s'adaptant aux différents besoins de design et aux tailles d'écran. En combinant cette propriété avec d'autres fonctionnalités CSS comme `minmax()`, `auto-fit`, et `repeat()`, ainsi qu'avec des **Media Queries**, vous pouvez créer des interfaces utilisateur modernes qui s'adaptent de manière fluide à différents appareils et résolutions.