À propos de cet outil
Le générateur de grille CSS est un outil gratuit qui s'exécute dans le navigateur et transforme trois réglages simples — nombre de colonnes, nombre de lignes et espacement — en une mise en page CSS grid prête à coller. Réglez les valeurs, regardez un aperçu en direct se redessiner, et copiez la règle générée.
Les colonnes et les lignes sont des nombres entiers de 1 à 12 (par défaut 3 et 2), et l'espacement est un curseur de 0 à 40 pixels (par défaut 10). Les deux dimensions sont écrites avec repeat() et l'unité 1fr, de sorte que chaque piste se partage l'espace disponible à parts égales. L'aperçu remplit chaque cellule d'un bloc numéroté et coloré pour visualiser la structure des pistes d'un coup d'œil, et la sortie est une simple règle .grid utilisant display: grid, grid-template-columns, grid-template-rows et gap. Un clic la copie dans votre presse-papiers.
Tout s'exécute entièrement dans votre navigateur — aucun téléversement, aucun compte, aucun suivi — et cela continue de fonctionner hors ligne une fois la page chargée.