Chargement...

Éléments Grid CSS

Grid Container a piloté le parent — tracks, gap et défauts de cellule. Les éléments grid posent une autre question : comment chaque enfant revendique des lignes, couvre des tracks et remplace l’alignement dans sa cellule ? Maîtrisez le placement sur lignes avant les zones nommées.

Une boîte à outils des éléments grid

📊 Éléments grid en un coup d’œil

Propriété	Travail quotidien
`grid-column`	Fixe les lignes début/fin de colonne de l’élément (raccourci)
`grid-row`	Fixe les lignes début/fin de rangée de l’élément (raccourci)
`span`	Étire l’élément sur N tracks depuis la ligne de départ
`justify-self`	Remplace `justify-items` pour un élément (axe inline)
`align-self`	Remplace `align-items` pour un élément (axe block)
`place-self`	Raccourci pour `align-self` + `justify-self`

Les lignes de grid sont numérotées depuis le bord de départ. Un élément qui commence à la ligne 1 et finit à la ligne 3 couvre deux tracks de colonne. Pensez d’abord en lignes ; les zones nommées viennent après.

grid-column — se placer sur les lignes de colonne

grid-column: start / end ancre un enfant entre des lignes de colonne. Une barre latérale occupe souvent la première track ; le panneau principal prend le reste.

Barre latérale sur lignes de colonne

css

.board {
display: grid;
grid-template-columns: 14rem 1fr;
gap: 1rem;
}

.board__aside {
grid-column: 1 / 2;
}

.board__main {
grid-column: 2 / 3;
}

span — s’étirer sur les tracks

span compte les tracks depuis la ligne de départ. Un hero pleine largeur sur un plateau à trois colonnes utilise souvent grid-column: 1 / span 3.

Hero couvre trois colonnes

css

.hero {
grid-column: 1 / span 3;
}

grid-row — se placer sur les lignes de rangée

Même idée sur l’axe block. Épinglez une bannière en bandeau haut, ou laissez une carte haute occuper deux tracks de rangée avec span.

Bannière sur lignes de rangée

css

.banner {
grid-row: 1 / 2;
}

.tall-card {
grid-row: 2 / span 2;
}

Colonne et rangée ensemble

Combinez les deux quand un enfant veut un rectangle clair — par exemple une tuile mise en avant sur deux colonnes et une rangée.

Tuile mise en avant avec span

css

.feature {
grid-column: 1 / span 2;
grid-row: 1 / 2;
}

place-self — un élément, un autre alignement de cellule

Remplacez justify-items / align-items du conteneur pour un seul enfant. place-self: center est un raccourci calme quand les deux axes doivent matcher.

Remplacement avec place-self

css

.board {
display: grid;
justify-items: stretch;
align-items: stretch;
gap: 0.75rem;
}

.board .badge {
place-self: center;
}

Une habitude calme d’élément grid

Placez d’abord avec les lignes de colonne et de rangée, utilisez span quand un enfant couvre plusieurs tracks, puis affinez l’alignement ponctuel avec place-self. Gardez l’ordre du DOM sensé — évitez les tours de order qui brouillent le focus clavier. Laissez les zones de modèle nommées pour Grid Areas.

Rôles d’élément nommés

css

.shell__hero {
grid-column: 1 / -1;
}

.shell__aside {
grid-column: 1 / 2;
align-self: start;
}

.shell__main {
grid-column: 2 / 3;
}

Essayez vous-même

Construisez un plateau à deux colonnes ; placez aside sur grid-column: 1 / 2 et main sur 2 / 3.
Ajoutez un hero à trois colonnes avec grid-column: 1 / span 3.
Épinglez une bannière avec grid-row: 1 / 2.
Étendez une tuile mise en avant sur deux colonnes et une rangée.
Centrez un badge avec place-self: center et notez les zones nommées pour la suite.

Erreurs fréquentes

Mettre span ou des numéros de ligne sur le conteneur au lieu d’un élément
Oublier que les lignes commencent à 1 et compter les tracks comme des lignes
Mélanger le placement d’élément avec le packing justify-content du parent
Sauter vers grid-template-areas nommées avant de maîtriser les lignes
Réordonner avec order et casser l’ordre tab/source

Résumé

Les éléments grid contrôlent le placement sur lignes, le span et l’alignement par élément
grid-column / grid-row ancrent les lignes de début et de fin
span s’étire sur les tracks depuis une ligne de départ
place-self (et props self) remplacent l’alignement de cellule pour un enfant
Les zones de modèle nommées arrivent dans la leçon Grid Areas

🧠 Testez Vos Connaissances

Prêt à Commencer

Testez Vos Connaissances

Mettez-vous au défi avec ce quiz interactif et voyez à quel point vous comprenez le sujet

❓

Questions

🎯

70%

Pour Réussir

♾️

∞

Temps

🔄

∞

Tentatives

📝 Instructions

Lisez chaque question attentivement
Sélectionnez la meilleure réponse pour chaque question
Vous pouvez refaire le quiz autant de fois que vous le souhaitez
Votre progression sera affichée en haut

Langue