Display Grid et modèles de colonnes et de lignes
Activez CSS Grid et définissez les pistes de colonnes et de lignes avec grid-template-columns et grid-template-rows.
Display Grid et modèles de colonnes et de lignes est une leçon CSS Academy gratuite sur CoddyKit. Ceci est la leçon 1 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 CSS Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours CSS Academy comprend 4 leçons au total.
Activation de la grille CSS
La grille CSS est activée avec display: grid sur un conteneur. Ses enfants directs deviennent automatiquement des éléments de grille placés dans des cellules.
<div class="layout">
<div style="background:#4f8cff22;border:1px solid #4f8cff;padding:12px;border-radius:4px;">Item A</div>
<div style="background:#ffb84d22;border:1px solid #ffb84d;padding:12px;border-radius:4px;">Item B</div>
<div style="background:#7ee78722;border:1px solid #7ee787;padding:12px;border-radius:4px;">Item C</div>
</div>grid-template-columns
grid-template-columns définit le nombre et la taille des colonnes. Chaque valeur crée une piste de colonne.
<div class="layout">
<div style="background:#4f8cff22;border:1px solid #4f8cff;padding:12px;border-radius:4px;">200px column</div>
<div style="background:#ffb84d22;border:1px solid #ffb84d;padding:12px;border-radius:4px;">1fr column</div>
<div style="background:#7ee78722;border:1px solid #7ee787;padding:12px;border-radius:4px;">1fr column</div>
</div>grid-template-rows
grid-template-rows définit les pistes de lignes explicites. Les éléments qui dépassent les lignes définies créent des lignes implicites.
<div class="layout" style="min-height:220px;">
<div style="grid-column:span 2;background:#4f8cff22;border:1px solid #4f8cff;padding:8px;">Header (row: auto)</div>
<div style="background:#ffb84d22;border:1px solid #ffb84d;padding:8px;">Main left (row: 1fr)</div>
<div style="background:#ffb84d22;border:1px solid #ffb84d;padding:8px;">Main right (row: 1fr)</div>
<div style="grid-column:span 2;background:#7ee78722;border:1px solid #34c759;padding:8px;">Footer (row: auto)</div>
</div>Pistes de colonnes et de lignes
Chaque valeur de grid-template-columns ou grid-template-rows crée une piste. Les pistes peuvent utiliser n’importe quelle unité de taille :
- Fixe :
200px,10rem - Flexible :
1fr - Fondée sur le contenu :
auto,min-content,max-content
L’unité fr
fr (unité fractionnaire) répartit l’espace disponible après soustraction des tailles fixes. 1fr 2fr crée des colonnes selon un ratio de 1:2.
<div class="grid">
<div style="background:#4f8cff22;border:1px solid #4f8cff;padding:12px;border-radius:4px;">300px fixed</div>
<div style="background:#ffb84d22;border:1px solid #ffb84d;padding:12px;border-radius:4px;">1fr (1x share)</div>
<div style="background:#7ee78722;border:1px solid #7ee787;padding:12px;border-radius:4px;">2fr (2x share)</div>
</div>La valeur auto dans les pistes
Dans une piste, auto ajuste la taille en fonction du contenu. En tant que colonne, cette valeur prend la largeur minimale nécessaire pour sa cellule la plus large ; en tant que ligne, elle s’ajuste à la cellule la plus haute.
<div class="sidebar-layout">
<div style="background:#4f8cff22;border:1px solid #4f8cff;padding:8px;">Sidebar (auto width)</div>
<div style="background:#ffb84d22;border:1px solid #ffb84d;padding:8px;">Main content (1fr fills the rest)</div>
</div>Exemple de mise en page
Une mise en page courante avec trois lignes : en-tête, contenu principal et pied de page :
<div class="page">
<header style="background:#4f8cff22;border:1px solid #4f8cff;padding:8px;">Header</header>
<main style="background:#ffb84d22;border:1px solid #ffb84d;padding:8px;">Main (fills available space)</main>
<footer style="background:#7ee78722;border:1px solid #34c759;padding:8px;">Footer</footer>
</div>Notation abrégée grid-template
grid-template combine les lignes et les colonnes :
<div class="grid" style="display:grid;min-height:180px;">
<div style="background:#4f8cff22;border:1px solid #4f8cff;padding:8px;">Header</div>
<div style="background:#ffb84d22;border:1px solid #ffb84d;padding:8px;">Main</div>
<div style="background:#7ee78722;border:1px solid #34c759;padding:8px;">Footer</div>
</div>Inspecter une grille dans DevTools
Les DevTools de Chrome et Firefox peuvent superposer les lignes des pistes de la grille sur la page. Cliquez sur l’indicateur de grille dans le panneau Elements pour visualiser les colonnes, les lignes, les espacements et les zones nommées.
Choisir entre Grid et Flexbox
Utilisez Grid lorsque vous devez contrôler simultanément les lignes et les colonnes. Utilisez Flexbox pour les mises en page unidimensionnelles (une rangée d’éléments ou une colonne d’éléments). De nombreuses mises en page utilisent les deux.
Numéros de lignes
Grid numérote automatiquement ses lignes à partir de 1. Vous pouvez utiliser ces numéros pour positionner manuellement les éléments. Les lignes de colonnes vont de 1 à n+1, où n est le nombre de colonnes.
<div style="display:grid;grid-template-columns:repeat(3, 1fr);gap:8px;">
<div class="header" style="grid-column:1 / -1;background:#4f8cff22;border:1px solid #4f8cff;padding:8px;">Header — spans all columns (grid-column: 1 / -1)</div>
<div style="background:#ffb84d22;border:1px solid #ffb84d;padding:8px;">Item 2</div>
<div style="background:#7ee78722;border:1px solid #34c759;padding:8px;">Item 3</div>
</div>Vérification rapide
Que crée grid-template-columns: 200px 1fr 2fr ?
Récapitulatif
display: grid crée un conteneur de grille. grid-template-columns et grid-template-rows définissent les pistes. L’unité fr répartit proportionnellement l’espace restant. auto ajuste la taille au contenu. Grid est idéal pour contrôler une mise en page en deux dimensions.
Questions Fréquemment Posées
La leçon « Display Grid et modèles de colonnes et de lignes » est-elle gratuite ?
Oui — le texte complet de « Display Grid et modèles de colonnes et de lignes » 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 CSS Academy, passe à CoddyKit PRO. Le cours CSS Academy comprend 4 leçons au total.
Qu'est-ce que j'apprendrai dans « Display Grid et modèles de colonnes et de lignes » ?
Activez CSS Grid et définissez les pistes de colonnes et de lignes avec grid-template-columns et grid-template-rows. Tu pratiques CSS 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 CSS Academy ?
Aucune expérience préalable n'est requise. CSS 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 1 sur 4.
Combien de temps prend la leçon « Display Grid et modèles de colonnes et de lignes » ?
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 CSS Academy ?
Oui. Chaque leçon CSS 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
- Display Grid et modèles de colonnes et de lignes
- Unité fr et Repeat
- Espacement et placement dans la grille
- Zones de modèle de grille