Choisissez des pistes auto-fit ou un nombre fixe de colonnes, puis réglez largeur minimale, écart, alignement et nombre d’éléments : l’aperçu est une vraie grille et le panneau de sortie contient la règle complète, de grid-template-columns à gap, align-items et justify-items.
Fonctionne localement dans votre navigateurChoisissez des colonnes fixes ou une piste auto-fit, réglez la largeur minimale des cartes, l’écart et le nombre d’éléments : l’aperçu est une vraie grille CSS et le panneau de sortie affiche la règle à coller (display: grid, grid-template-columns, gap, align-items et justify-items).
Les chiffres de cette page sont mesurés, pas recopiés de la spécification. Le banc démarre en auto-fit avec 180 px de minimum, 16 px d’écart et 8 éléments ; dans une fenêtre de 1360 px l’aperçu mesure 494 px et la même grille est passée à 2 pistes à 180 px, 5 à 80 px et 1 à 600 px.
auto-fit écrit repeat(auto-fit, minmax(min(100%, 180px), 1fr)) — la garde min(100%, …) empêche une piste de déborder d’un conteneur plus étroit que le minimum — et le mode fixe écrit repeat(4, minmax(0, 1fr)). Les deux exports contiennent aussi display: grid, gap, align-items et justify-items : une règle complète.
La largeur minimale décide du nombre de colonnes : mesuré dans l’aperçu de 494 px, 180 px donnent 2 pistes, 80 px en donnent 5 et 600 px n’en laissent qu’une. L’écart est une valeur unique pour les lignes et les colonnes.
Les quatre champs ont des limites strictes : colonnes 1-12, largeur minimale 80-600 px, écart 0-96 px, éléments 1-24. Saisir 20 colonnes dessinait 12 pistes alors que le champ affichait encore 20 ; le champ revient maintenant à 12 à la validation, et 9999 → 600 px, 200 → 96 px et 30 → 24 éléments suivent la même règle.
Les saisies vides, non numériques et décimales rentrent aussi dans la plage : 3.7 devient 4, -5 devient 1 et un champ vidé reprend la plus petite valeur autorisée. Pendant la frappe, l’aperçu suit la valeur mais le champ reste intact.
Il écrit une règle de conteneur et un bloc d’éléments d’exemple, rien de plus : pas de zones nommées (grid-template-areas), pas de placement par élément (span, row/column), pas d’auto-rows ni de remplissage dense, et les classes .grid / .grid__item sont un échafaudage à renommer.
Tout se passe dans la page : pendant que les contrôles étaient utilisés et le code copié, le navigateur n’a émis aucune requête. Le même script sert quatre autres générateurs (bezier, clamp, blurhash, gradient) dont les pages sont restées identiques ; la page grid ne débordait pas horizontalement en 320, 390, 768 et 1360 px.