À 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é
La saisie, les calculs, la génération CSS et les aperçus sont entièrement traités dans votre navigateur. Aucun contenu n'est envoyé à un serveur. Aucun backend, base de données, API en ligne ou CDN tiers n'est utilisé, et vos données ne sont pas enregistrées automatiquement.
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.