Design · 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.

01Saisir les valeurs

Fonctionne dans le navigateur

—

Fonctionne dans le navigateur

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

Les données sont traitées sur cette page et ne sont envoyées à aucun serveur.

À propos de cet outil

Créez une grille CSS à colonnes égales et adaptez le code à votre page.

Saisir les valeurs
Colonnes · Lignes · Espacement
Calculer / générer
Créez un aperçu de grille et du CSS à partir du nombre de colonnes, de lignes et de l’espacement.
Résultat
display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(80px, auto)); gap: 16px;

Créez une grille CSS à colonnes égales et adaptez le code à votre page.

Exemple concret

Résultat

display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
grid-template-rows: repeat(2, minmax(80px, auto));
gap: 16px;

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.