CSS Grid pour la mise en page
Définissez des lignes et des colonnes avec CSS Grid, positionnez précisément les éléments et créez des mises en page courantes avec un minimum de code.
CSS Grid pour la mise en page est une leçon Frontend Academy gratuite sur CoddyKit. Ceci est la leçon 3 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.
Qu'est-ce que la grille CSS ?
La grille CSS est un système de mise en page bidimensionnel : vous contrôlez à la fois les lignes et les colonnes. C'est le meilleur outil pour la structure générale d'une page et le positionnement explicite des éléments dans une grille définie.
Définir les colonnes : grid-template-columns
grid-template-columns définit la structure des colonnes. Utilisez des tailles fixes (px), des fractions flexibles (fr) ou auto. repeat(n, size) répète la définition d'une piste.
.layout {
display: grid;
grid-template-columns: 240px 1fr; /* sidebar + main */
}
.cards {
display: grid;
grid-template-columns: repeat(3, 1fr); /* 3 equal columns */
}L'unité fr
fr (unité fractionnaire) répartit proportionnellement l'espace restant. 1fr 2fr donne à la deuxième colonne deux fois plus d'espace qu'à la première. Cette unité est essentielle pour les pistes de grille fluides.
.layout {
display: grid;
grid-template-columns: 1fr 2fr 1fr; /* left center right */
}Définir les lignes : grid-template-rows
Vous pouvez également définir explicitement les lignes. Sinon, le navigateur crée automatiquement des lignes implicites. grid-auto-rows: minmax(200px, auto) dimensionne les lignes implicites.
.page {
display: grid;
grid-template-rows: auto 1fr auto; /* header content footer */
min-height: 100vh;
}gap dans la grille
Comme avec Flexbox, gap ajoute un espace entre les pistes de la grille sans modifier les bords extérieurs. row-gap et column-gap contrôlent séparément les deux axes.
.gallery {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 16px;
}grid-template-areas
Nommez les zones de la grille avec des chaînes, puis affectez-y les éléments avec grid-area. Vous obtenez ainsi un code de mise en page lisible et visuel.
.page {
display: grid;
grid-template-areas:
'header header header'
'sidebar main main'
'footer footer footer';
grid-template-columns: 240px 1fr;
grid-template-rows: auto 1fr auto;
}
header { grid-area: header; }
sidenav { grid-area: sidebar; }
main { grid-area: main; }
footer { grid-area: footer; }Positionner les éléments avec grid-column et grid-row
Contrôlez précisément la position d'un élément avec grid-column: start / end et grid-row: start / end. Utilisez -1 pour faire référence à la dernière ligne. span N couvre N pistes.
.featured {
grid-column: 1 / -1; /* span all columns */
grid-row: span 2; /* occupy two rows */
}auto-fit et minmax() — colonnes adaptatives
La règle de grille adaptative la plus puissante en une ligne : repeat(auto-fit, minmax(280px, 1fr)). Elle crée autant de colonnes que possible, chacune d'au moins 280 px de largeur, et remplit l'espace restant avec 1fr.
.cards {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 24px;
}auto-fill et auto-fit
auto-fill crée des pistes même si elles sont vides, en conservant une grille fixe. auto-fit réduit les pistes vides afin que les éléments s'étendent pour remplir la ligne. Utilisez auto-fit lorsque le contenu doit s'étirer.
Grille implicite et grille explicite
Les pistes que vous définissez constituent la grille explicite. Lorsque vous ajoutez plus d'éléments que le nombre de pistes définies, le navigateur crée des pistes implicites. Contrôlez leur taille avec grid-auto-rows et grid-auto-columns.
Grille ou Flexbox — quand utiliser chacun
Grille : mises en page bidimensionnelles, structure de page, galeries, tableaux de bord. Flexbox : lignes ou empilements unidimensionnels, centrage, répartition d'éléments sur une ligne. Ils se complètent : utilisez la grille pour l'ossature de la page et Flexbox pour l'intérieur des composants.
Vérification rapide
Quelle valeur CSS crée des colonnes d'au moins 250 px de largeur et partage équitablement l'espace restant ?
Récapitulatif : grille CSS
grid-template-columns définit les colonnes. fr partage l'espace. repeat() simplifie les répétitions. gap ajoute les espaces entre pistes. grid-template-areas rend les mises en page lisibles. auto-fit + minmax crée des grilles adaptatives sans requêtes de média. La grille est l'outil privilégié pour les mises en page bidimensionnelles.
Questions Fréquemment Posées
La leçon « CSS Grid pour la mise en page » est-elle gratuite ?
Oui — le texte complet de « CSS Grid pour la mise en page » 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 pour la mise en page » ?
Définissez des lignes et des colonnes avec CSS Grid, positionnez précisément les éléments et créez des mises en page courantes avec un minimum de code. 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 3 sur 4.
Combien de temps prend la leçon « CSS Grid pour la mise en page » ?
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
- La balise meta viewport
- Flexbox pour la mise en page
- CSS Grid pour la mise en page
- Requêtes média et développement mobile d’abord