Générateur de grille CSS (Grid)
Définissez un nombre de colonnes, de lignes et un espacement pour obtenir instantanément le code CSS Grid correspondant, avec aperçu en direct.
Comment ça marche
CSS Grid permet de définir une grille à deux dimensions en une seule propriété, contrairement à Flexbox qui gère un seul axe à la fois. Cet outil génère un grid-template-columns et grid-template-rows avec des colonnes et lignes de taille égale (1fr), pratique pour une galerie d'images ou un tableau de bord en un clic.
Que signifie « 1fr » dans le code généré ?
L'unité fr (fraction) répartit l'espace disponible à parts égales entre les colonnes ou les lignes ; repeat(3, 1fr) crée donc trois colonnes de largeur identique qui se partagent tout l'espace du conteneur.
Puis-je avoir des colonnes de tailles différentes ?
Oui, cet outil génère un point de départ simple avec des colonnes égales ; vous pouvez ensuite éditer manuellement grid-template-columns pour utiliser des valeurs fixes ou variées comme 200px 1fr 2fr.
Traitement 100% local : le code est généré entièrement dans votre navigateur via WebAssembly.