CSS Grid : zones de modèle, auto-fit et minmax
Nommez les zones de la grille pour créer des mises en page lisibles, utilisez auto-fit avec minmax() pour les colonnes adaptatives et contrôlez les pistes implicites.
CSS Grid : zones de modèle, auto-fit et minmax est une leçon Frontend Academy gratuite sur CoddyKit. Ceci est la leçon 2 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage Frontend Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours Frontend Academy comprend 4 leçons au total.
Zones de modèle nommées — mise en page visuelle
La propriété de définition des zones du modèle de grille permet de nommer les régions dans un format visuel en ASCII. Chaque chaîne représente une ligne ; chaque mot, une cellule. Les points (.) représentent les cellules vides. Affectez les éléments avec grid-area: name.
.layout {
display: grid;
grid-template-areas:
'header header'
'sidebar main'
'footer footer';
grid-template-columns: 240px 1fr;
grid-template-rows: 60px 1fr 48px;
min-height: 100vh;
}
header { grid-area: header; }
.sidebar { grid-area: sidebar; }
main { grid-area: main; }
footer { grid-area: footer; }Zones de modèle adaptatives avec les requêtes de média
Modifiez la disposition des zones du modèle aux points de rupture pour déplacer la barre latérale d’une colonne vers une position située sous le contenu principal sur mobile.
.layout {
grid-template-areas:
'header'
'main'
'sidebar'
'footer';
grid-template-columns: 1fr;
}
@media (min-width: 768px) {
.layout {
grid-template-areas:
'header header'
'sidebar main'
'footer footer';
grid-template-columns: 220px 1fr;
}
}Ajustement automatique ou remplissage automatique
auto-fit : les pistes vides sont réduites afin que les éléments s’étirent pour remplir la ligne. auto-fill : la structure de la grille est conservée même si certaines pistes sont vides. Pour les grilles adaptatives de cartes, auto-fit est presque toujours la solution souhaitée.
.cards {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: 16px;
}Fonction de taille minimale et maximale en détail
minmax(min, max) définit une piste dont la taille est au moins égale à min et au plus égale à max. Combinaisons courantes : minmax(0, 1fr) (entièrement flexible), minmax(200px, 1fr) (adaptative avec une taille minimale), minmax(auto, auto) (dimensionnée selon le contenu).
Étendre des colonnes et des lignes
Utilisez grid-column: span 2 pour faire s’étendre un élément sur deux colonnes. Combinez cette propriété avec grid-row: span 2 pour créer un élément mis en avant qui occupe un bloc de 2×2 dans la grille.
.featured {
grid-column: span 2;
grid-row: span 2;
}
/* Or explicit placement: */
.featured {
grid-column: 1 / 3; /* from line 1 to line 3 */
grid-row: 1 / 3;
}Placement automatique compact
grid-auto-flow: dense comble les espaces vides avec des éléments plus petits. Cette propriété est utile pour les mises en page semblables à une maçonnerie, où les éléments ont des tailles variables.
.mosaic {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-auto-flow: dense;
gap: 8px;
}Unités fractionnaires et pourcentages
L’unité fractionnaire désigne toujours l’espace disponible après soustraction des pistes de taille fixe et des espacements. Mélanger des tailles fractionnaires et fixes offre une grande souplesse : une barre latérale fixe et un contenu principal flexible.
Colonnes et lignes automatiques de la grille
Ces propriétés contrôlent la taille des pistes créées implicitement lorsque des éléments sont placés en dehors de la grille explicite. grid-auto-rows: minmax(100px, auto) donne aux lignes implicites une hauteur minimale.
.photo-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-auto-rows: minmax(200px, auto);
gap: 8px;
}Inspecter une grille dans DevTools
Dans DevTools, les lignes de la grille et les noms des zones sont superposés à la page lorsque vous cliquez sur le badge de grille à côté d’un conteneur de grille dans le panneau des éléments. Utilisez cette fonction pour rechercher les tailles inattendues des pistes et les problèmes de placement des éléments.
Sous-grille CSS
grid-template-columns: subgrid permet à une grille imbriquée de s’aligner sur les pistes de la grille parente. Cette fonctionnalité est prise en charge par tous les navigateurs modernes depuis 2023. Elle est essentielle pour aligner le contenu interne des cartes dans une grille de cartes.
.card-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
}
.card {
display: grid;
grid-row: span 3;
grid-template-rows: subgrid; /* aligns to parent rows */
}Quand la grille est préférable à la mise en page flexible
La grille est préférable lorsque vous avez besoin d’un contrôle bidimensionnel explicite, c’est-à-dire lorsque les lignes et les colonnes comptent toutes les deux. Si vous souhaitez simplement disposer des éléments sur une ligne ou dans une pile, la mise en page flexible est plus simple.
Vérification rapide
Quelle valeur de grille CSS crée autant de colonnes que possible avec une taille minimale de 200px, chaque colonne se partageant équitablement l’espace restant ?
Récapitulatif : grille CSS avancée
La définition de zones de modèle crée des mises en page nommées et lisibles. L’association de l’ajustement automatique et de tailles minimale et maximale crée des grilles adaptatives sans requêtes de média. Étendez les éléments sur plusieurs colonnes et lignes. Le placement automatique compact comble les espaces. Utilisez la superposition de grille de DevTools pour rechercher les problèmes. La sous-grille aligne les éléments imbriqués sur les pistes parentes.
Questions Fréquemment Posées
La leçon « CSS Grid : zones de modèle, auto-fit et minmax » est-elle gratuite ?
Oui — le texte complet de « CSS Grid : zones de modèle, auto-fit et minmax » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours Frontend Academy, passe à CoddyKit PRO. Le cours Frontend Academy comprend 4 leçons au total.
Qu'est-ce que j'apprendrai dans « CSS Grid : zones de modèle, auto-fit et minmax » ?
Nommez les zones de la grille pour créer des mises en page lisibles, utilisez auto-fit avec minmax() pour les colonnes adaptatives et contrôlez les pistes implicites. Tu pratiques Frontend Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.
Dois-je avoir de l'expérience pour commencer Frontend Academy ?
Aucune expérience préalable n'est requise. Frontend Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 2 sur 4.
Combien de temps prend la leçon « CSS Grid : zones de modèle, auto-fit et minmax » ?
La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.
Peux-tu écrire et exécuter du code dans cette leçon Frontend Academy ?
Oui. Chaque leçon Frontend Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.
Toutes les leçons de ce cours
- Approfondissement de Flexbox : alignement, retour à la ligne et ordre
- CSS Grid : zones de modèle, auto-fit et minmax
- Combiner Flexbox et Grid
- Variables CSS pour les thèmes