Espacement et placement dans la grille
Ajoutez de l’espace entre les cellules de la grille avec gap et placez les éléments avec grid-column et grid-row.
Espacement et placement dans la grille est une leçon CSS 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 CSS Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours CSS Academy comprend 4 leçons au total.
Les espacements dans CSS Grid
La propriété gap définit l’espace entre les lignes et les colonnes de la grille. Elle remplace l’ancienne propriété grid-gap et fonctionne également avec Flexbox.
<div class="grid">
<div style="background:#4f8cff22;border:1px solid #4f8cff;padding:12px;border-radius:4px;">1</div>
<div style="background:#ffb84d22;border:1px solid #ffb84d;padding:12px;border-radius:4px;">2</div>
<div style="background:#7ee78722;border:1px solid #7ee787;padding:12px;border-radius:4px;">3</div>
<div style="background:#ff6b6b22;border:1px solid #ff6b6b;padding:12px;border-radius:4px;">4</div>
<div style="background:#b57bff22;border:1px solid #b57bff;padding:12px;border-radius:4px;">5</div>
<div style="background:#3fd0c922;border:1px solid #3fd0c9;padding:12px;border-radius:4px;">6</div>
</div>row-gap et column-gap
Définissez séparément les espacements entre les lignes et entre les colonnes :
<div class="grid" style="display:grid;grid-template-columns:repeat(3, 1fr);">
<div style="background:#4f8cff22;border:1px solid #4f8cff;padding:12px;border-radius:4px;">1</div>
<div style="background:#ffb84d22;border:1px solid #ffb84d;padding:12px;border-radius:4px;">2</div>
<div style="background:#7ee78722;border:1px solid #7ee787;padding:12px;border-radius:4px;">3</div>
<div style="background:#ff6b6b22;border:1px solid #ff6b6b;padding:12px;border-radius:4px;">4</div>
<div style="background:#b57bff22;border:1px solid #b57bff;padding:12px;border-radius:4px;">5</div>
<div style="background:#3fd0c922;border:1px solid #3fd0c9;padding:12px;border-radius:4px;">6</div>
</div>Numéros des lignes de la grille
CSS Grid numérote ses lignes à partir de 1. Une grille de trois colonnes possède les lignes de colonnes 1, 2, 3 et 4. Les nombres négatifs sont comptés depuis la fin : -1 désigne la dernière ligne et -2, l’avant-dernière.
grid-column et grid-row
Positionnez manuellement les éléments à l’aide des numéros de ligne avec grid-column et grid-row :
<div style="display:grid;grid-template-columns:repeat(3, 1fr);grid-auto-rows:60px;gap:8px;">
<div class="header" style="background:#4f8cff22;border:1px solid #4f8cff;padding:8px;">Header (spans all 3 columns, row 1)</div>
<div class="main" style="background:#ffb84d22;border:1px solid #ffb84d;padding:8px;">Main (spans 2 columns, row 2)</div>
</div>Le mot-clé span
Utilisez span pour indiquer le nombre de pistes qu’un élément doit couvrir, plutôt que des numéros de ligne absolus :
<div style="display:grid;grid-template-columns:repeat(4, 60px);grid-auto-rows:60px;gap:8px;">
<div style="background:#ffb84d22;border:1px solid #ffb84d;"></div>
<div class="featured" style="background:#4f8cff22;border:1px solid #4f8cff;padding:4px;">Featured (span 2x2)</div>
<div style="background:#ffb84d22;border:1px solid #ffb84d;"></div>
<div style="background:#ffb84d22;border:1px solid #ffb84d;"></div>
</div>Numéros de ligne négatifs
Les indices négatifs sont comptés depuis la fin. 1 / -1 couvre toujours toute la largeur de la grille, quel que soit le nombre de colonnes :
<div style="display:grid;grid-template-columns:repeat(3, 1fr);gap:8px;">
<div class="full-width" style="background:#4f8cff22;border:1px solid #4f8cff;padding:8px;">Full width (grid-column: 1 / -1)</div>
<div style="background:#ffb84d22;border:1px solid #ffb84d;padding:8px;">Item</div>
<div style="background:#7ee78722;border:1px solid #34c759;padding:8px;">Item</div>
</div>Notation abrégée grid-area
grid-area définit en une seule propriété les quatre valeurs de positionnement dans la grille : row-start / column-start / row-end / column-end.
<div style="display:grid;grid-template-columns:repeat(3, 1fr);grid-auto-rows:60px;gap:0;">
<div class="hero" style="background:#4f8cff22;border:1px solid #4f8cff;padding:8px;">Hero (row 1 start, col 1 start, row 2 end, last column)</div>
<div style="background:#ffb84d22;border:1px solid #ffb84d;"></div>
<div style="background:#ffb84d22;border:1px solid #ffb84d;"></div>
<div style="background:#ffb84d22;border:1px solid #ffb84d;"></div>
</div>Placement automatique
Les éléments qui ne sont pas positionnés explicitement sont placés automatiquement dans la prochaine cellule disponible, conformément à l’algorithme grid-auto-flow. Par défaut, le navigateur remplit les cellules de gauche à droite, puis de haut en bas.
justify-items et align-items dans Grid
Dans un conteneur de grille, justify-items aligne horizontalement le contenu des cellules ; align-items l’aligne verticalement. Ces deux propriétés ont par défaut la valeur stretch.
<div class="grid" style="min-height:120px;">
<div style="background:#4f8cff22;border:1px solid #4f8cff;padding:8px;width:fit-content;">centered, top-aligned item</div>
</div>justify-self et align-self
Les éléments individuels de la grille peuvent remplacer l’alignement du conteneur à l’aide de justify-self et align-self :
<div style="display:grid;grid-template-columns:1fr;min-height:120px;">
<div class="featured-card" style="background:#4f8cff22;border:1px solid #4f8cff;padding:8px;">Stretched horizontally, centered vertically</div>
</div>Éléments superposés dans la grille
Plusieurs éléments peuvent occuper la même cellule de la grille. Utilisez z-index pour contrôler celui qui apparaît au premier plan. Cela permet de créer des compositions en couches, comme une image avec du texte superposé.
<div style="display:grid;grid-template-columns:repeat(2, 1fr);grid-template-rows:repeat(2, 60px);">
<div class="image" style="background:#4f8cff44;border:1px solid #4f8cff;">Image layer</div>
<div class="caption" style="background:rgba(0,0,0,0.6);color:#fff;align-self:end;padding:4px 8px;">Caption overlay</div>
</div>Vérification rapide
Un élément possède grid-column: 2 / span 3. Quelles colonnes occupe-t-il dans une grille de cinq colonnes ?
Récapitulatif
gap ajoute des espacements entre les cellules de la grille. Les éléments sont positionnés à l’aide des numéros de ligne avec grid-column et grid-row. Le mot-clé span indique le nombre de pistes à couvrir. Utilisez 1 / -1 pour couvrir toujours toutes les colonnes. Les éléments de la grille peuvent se chevaucher grâce à z-index.
Questions Fréquemment Posées
La leçon « Espacement et placement dans la grille » est-elle gratuite ?
Oui — le texte complet de « Espacement et placement dans la grille » 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 « Espacement et placement dans la grille » ?
Ajoutez de l’espace entre les cellules de la grille avec gap et placez les éléments avec grid-column et grid-row. 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 3 sur 4.
Combien de temps prend la leçon « Espacement et placement dans la grille » ?
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