Générateur CSS Grid
Erreur: Utiliser un résultat hors du périmètre décrit.
Correction: Créez une grille CSS à colonnes égales et adaptez le code à votre page.
Archives · Gratuit
Générateur CSS Grid
Créez un aperçu de grille et du CSS à partir du nombre de colonnes, de lignes et de l’espacement.
Cet outil est archivé. Vérifiez à nouveau sa méthode et ses données datées avant utilisation.
01Saisir les valeurs
Fonctionne dans le navigateurFonctionne hors ligne dans le navigateur. Après le chargement de la page et des fichiers nécessaires, le traitement ne nécessite pas Internet.
02Générateur CSS Grid
Fonctionne dans le navigateur
Comment ça marche
Créez un aperçu de grille et du CSS à partir du nombre de colonnes, de lignes et de l’espacement.
Fonctionne dans le navigateur
Vos données restent privées
Les données sont traitées sur cette page et ne sont envoyées à aucun serveur.
À propos de cet outil
Utiliser l’outil ↑Créez un aperçu de grille et du CSS à partir du nombre de colonnes, de lignes et de l’espacement.
Créez une grille CSS à colonnes égales et adaptez le code à votre page.
- Saisir les valeurs
- Colonnes
- Lignes
- Espacement
- Méthode de calcul
Créez un aperçu de grille et du CSS à partir du nombre de colonnes, de lignes et de l’espacement.
- Exemple concret · Résultat
display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(80px, auto)); gap: 16px;
Méthode de calcul
- Créez une grille CSS à colonnes égales et adaptez le code à votre page.
Générateur CSS Grid
- Colonnes
- 3
- Lignes
- 2
- Espacement
- 16 px
Résultat
display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(80px, auto)); gap: 16px;
Questions fréquentes
Comment interpréter le résultat ?
Créez une grille CSS à colonnes égales et adaptez le code à votre page.
Où vont mes données ?
Les calculs se font sur votre appareil. Les données ne sont pas envoyées à un serveur.
Termes et définitions
Saisir les valeurs
- Colonnes
Créez une grille CSS à colonnes égales et adaptez le code à votre page.
Saisissez un entier, sans fraction.
Minimum: 1 · Maximum: 12
- Lignes
Saisissez un entier, sans fraction.
Minimum: 1 · Maximum: 12
- Espacement
Saisissez la valeur numérique de cette grandeur. Utilisez l’unité affichée près du champ. px
Minimum: 0 · Maximum: 100 px
Résultat
- Résultat
Créez une grille CSS à colonnes égales et adaptez le code à votre page.
Calculé à partir des entrées selon la méthode ci-dessous.
Erreurs fréquentes et corrections
Limites et hypothèses
- Créez une grille CSS à colonnes égales et adaptez le code à votre page.
- Les résultats affichés peuvent être arrondis, sans gain de précision de mesure.