À propos de cet outil
Ce générateur crée une grille à deux dimensions avec des pistes égales. Le nombre de lignes et de colonnes doit être un entier de 1 à 12. Leur produit détermine le nombre d'éléments, limité à 144.
Mode d'emploi
- Saisissez le nombre de colonnes et de lignes : un entier de 1 à 12 pour chacun.
- Réglez l'espacement entre les colonnes et entre les lignes.
- Observez la grille et ses éléments numérotés générés en direct.
- Copiez le CSS et appliquez-le au conteneur de votre projet.
Exemples
- 3 colonnes × 2 lignes affichent 6 éléments.
- 12 colonnes × 12 lignes atteignent la limite de 144 éléments.
- Comparez les espacements en choisissant 24px entre les colonnes et 12px entre les lignes.
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(2, 1fr);
gap: 16px;
}Fonctionnement et explications CSS
repeat(n, 1fr) crée n pistes égales ; 1fr représente une part de l'espace disponible. column-gap et row-gap définissent les espacements entre les colonnes et les lignes. S'ils sont égaux, la notation abrégée gap suffit.
Utilisations courantes
- Créer des listes de cartes et des galeries d'images.
- Concevoir des tableaux de bord avec des zones de taille égale.
- Comprendre repeat(), fr et gap.
Confidentialité
Vos données et les résultats sont traités uniquement dans votre navigateur, sans être envoyés ni enregistrés automatiquement. Copiez les résultats à conserver et enregistrez-les vous-même avant de quitter la page.
FAQ
Quelle est la différence entre CSS Grid et Flexbox ?
Grid permet de contrôler simultanément les lignes et les colonnes. Flexbox répartit principalement les éléments le long d'un seul axe.
Que signifie 1fr ?
fr représente une part de l'espace disponible restant. Si toutes les pistes valent 1fr, cet espace est généralement réparti à parts égales.
Que signifie repeat(3, 1fr) ?
Cette notation équivaut à 1fr 1fr 1fr et définit trois pistes égales.
Quelle est la différence entre gap et margin ?
gap ajoute de l'espace entre les pistes, sans espacement supplémentaire autour du conteneur. margin définit la marge extérieure d'un élément.
Pourquoi limiter les lignes et les colonnes à 12 ?
Cette limite maintient l'aperçu à 144 éléments au maximum et évite de ralentir la page avec des valeurs trop grandes.