Lignes et zones de grille nommées
Nommez les lignes et les zones de la grille pour rendre son placement plus lisible et plus facile à maintenir.
Lignes et zones de grille nommées 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.
Nommer les lignes de la grille
Vous pouvez donner des noms aux lignes de la grille entre crochets dans grid-template-columns et grid-template-rows. Les lignes nommées rendent le code de placement plus lisible que les simples numéros.
<div class="layout">
<div class="sidebar">Sidebar</div>
<div class="main">Main</div>
</div>Placer des éléments avec des lignes nommées
Utilisez des lignes nommées dans grid-column et grid-row pour rendre le placement lisible :
<div class="layout">
<div class="sidebar">Sidebar</div>
<div class="main">Main</div>
</div>Noms de lignes avec -start et -end
Lorsque des zones nommées sont définies avec grid-template-areas, CSS crée automatiquement des lignes nommées avec les suffixes -start et -end que vous pouvez référencer.
<div class="layout">
<div class="sidebar">Sidebar</div>
<div class="main">Main</div>
</div>Répéter des lignes nommées
Avec repeat(), vous pouvez inclure des noms dans le modèle répété. Des suffixes numérotés sont ajoutés aux lignes pour les distinguer.
<div class="grid">
<div>1</div><div>2</div><div>3</div>
</div>Étendre des lignes nommées
Utilisez des lignes nommées avec span pour couvrir un nombre précis de pistes nommées :
<div class="grid">
<div class="header">Header spans 3</div>
<div>A</div><div>B</div><div>C</div>
</div>Récapitulatif des zones nommées
Les zones nommées (avec grid-template-areas) constituent l’approche la plus lisible pour positionner les éléments :
<div class="page">
<header>Header</header>
<div class="sidebar">Sidebar</div>
<div class="main">Main</div>
<div class="footer">Footer</div>
</div>Lignes nommées pour les mises en page complexes
Les lignes nommées sont particulièrement utiles pour les mises en page éditoriales complexes comportant plusieurs éléments qui s’étendent sur plusieurs pistes :
<div class="magazine">
<div class="full-bleed">Full bleed banner</div>
<div class="article">Article content</div>
</div>Combiner noms et numéros
Les lignes nommées et les numéros de ligne peuvent être librement mélangés dans une même grille :
<div class="layout"><div class="item">Item</div></div>Plusieurs noms sur une même ligne
Une même ligne peut avoir plusieurs noms — ce qui est utile lorsqu’elle sert à la fois de fin pour une zone et de début pour une autre :
<div class="grid">
<div>Sidebar</div>
<div>Content</div>
</div>Lignes nommées implicites provenant des zones
Si vous définissez une zone nommée appelée « main », les lignes main-start (colonne et ligne) et main-end sont automatiquement créées, ce qui vous permet de les utiliser pour des éléments qui se chevauchent.
Déboguer les lignes nommées dans les DevTools
Les DevTools de Chrome et de Firefox peuvent afficher les lignes de grille nommées sous forme d’étiquettes sur la superposition. Activez les étiquettes de lignes dans le panneau Layout pour vérifier que les noms sont corrects.
Vérification rapide
Lorsque vous définissez une zone de grille nommée « sidebar » dans grid-template-areas, quels noms de lignes sont automatiquement créés ?
Récapitulatif
Nommez les lignes de la grille entre crochets dans les définitions de pistes pour rendre le placement lisible. Les zones nommées génèrent automatiquement des noms de lignes avec -start et -end. Une ligne peut avoir plusieurs noms. Les lignes nommées se combinent librement avec span et les numéros. Utilisez les DevTools pour visualiser les lignes nommées sous forme de superpositions.
Apprends CSS avec un tuteur IA — gratuit
Écris et exécute du vrai code dans ton navigateur, obtiens de l'aide instantanée d'un tuteur IA disponible 24h/24, et reprends là où tu t'es arrêté sur le web ou dans l'app.
- Cours
- 40
- Leçons
- 159
Questions Fréquemment Posées
La leçon « Lignes et zones de grille nommées » est-elle gratuite ?
Oui — le texte complet de « Lignes et zones de grille nommées » 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 « Lignes et zones de grille nommées » ?
Nommez les lignes et les zones de la grille pour rendre son placement plus lisible et plus facile à maintenir. 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 « Lignes et zones de grille nommées » ?
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
- Lignes et zones de grille nommées
- Auto-fit et auto-fill avec minmax
- Grille implicite et Grid-Auto-Flow
- Subgrid pour aligner le contenu imbriqué