Générateur de Grille CSS
Un générateur de grille CSS permet de construire une grille au clic plutôt qu’à l’aveugle. Réglez les colonnes, les lignes, les gouttières et la taille des pistes, et le panneau de code écrit la règle : la grille 3 × 3 par défaut produit .grid-container { display: grid; grid-template-columns: 1fr 1fr 1fr; grid-template-rows: 1fr 1fr 1fr; gap: 16px 16px; } et neuf div assortis.
Paramètres
Item Properties
Aperçu
Code Généré
À propos de Générateur de Grille CSS
L’outil s’ouvre sur une grille 3 × 3 avec des gouttières de 16 pixels et toutes les pistes à 1fr. Le panneau Paramètres à gauche modifie le nombre de colonnes et de lignes, la gouttière de colonne et celle de ligne, puis liste un champ par piste sous Tailles des colonnes et Tailles des lignes : une piste peut valoir 1fr, 200px, auto, minmax(200px, 1fr) ou toute autre valeur acceptée par CSS. Le bloc Alignement expose les quatre propriétés du conteneur — justify-items, align-items, justify-content et align-content — en stretch, start, center ou end.
Six préréglages règlent tout d’un coup : Holy Grail (trois colonnes de 200px, 1fr, 200px sur des lignes auto, 1fr, auto), Sidebar (250px et 1fr), Dashboard (quatre colonnes égales sur auto, 1fr, 1fr), Gallery (3 × 3 avec des gouttières de 8 pixels), Blog (1fr, 2fr, 1fr sur auto et 1fr) et Cards (3 × 2 avec des gouttières de 24 pixels).
L’aperçu de droite est une vraie grille CSS et non une image : il se réagence exactement comme le ferait un navigateur. Chaque cellule est un bloc coloré que l’on peut sélectionner d’un clic ; la cellule sélectionnée reçoit un contour blanc et ses étendues de colonne et de ligne deviennent modifiables. Le panneau Code Généré imprime l’ensemble : un bloc style avec .grid-container, une règle .item-N pour chaque cellule déplacée, et les div HTML. Trois boutons copient le CSS, le HTML ou les deux.
Deux détails à connaître. La gouttière s’écrit en deux valeurs — d’abord les lignes, puis les colonnes — l’ordre attendu par la propriété raccourcie gap : gap: 16px 24px signifie donc 16 pixels entre les lignes. Et les règles .item-N n’apparaissent que pour les cellules déplacées : une grille simple ne produit que la règle du conteneur, ce qui est en général exactement ce qu’on veut coller. Rien n’est envoyé ni conservé d’une visite à l’autre.
Cas d'utilisation
Comment utiliser
Partez d’un préréglage — Holy Grail, Sidebar, Dashboard, Gallery, Blog ou Cards — ou gardez la grille 3 × 3 par défaut.
Réglez le nombre de colonnes et de lignes ainsi que les gouttières dans le panneau Paramètres.
Modifiez chaque piste sous Tailles des colonnes et Tailles des lignes ; chaque champ accepte n’importe quelle valeur de piste CSS, comme 1fr, 200px ou minmax(200px, 1fr).
Utilisez les listes d’Alignement pour justify-items, align-items, justify-content et align-content, et cliquez un bloc de l’aperçu pour changer l’étendue d’une cellule.
Lisez le panneau Code Généré et cliquez sur Copier CSS, Copier HTML ou Tout copier.
Récupérez le résultat dans Generated Code avec le bouton CSS, le bouton HTML, ou Copy All pour obtenir d'un coup le balisage et la feuille de style.
Astuces Pro
- Les champs de piste acceptent n’importe quelle valeur CSS valide, pas seulement des nombres : minmax(200px, 1fr), auto ou min-content fonctionnent, car le texte est repris tel quel dans grid-template-columns.
- gap s’imprime dans l’ordre lignes puis colonnes : gap: 16px 24px, c’est 16 pixels entre les lignes et 24 entre les colonnes. Mettez les deux à la même valeur si cette forme prête à confusion en relecture.
- Seules les cellules déplacées reçoivent une règle .item-N : si le code n’affiche que .grid-container, c’est correct — le placement par défaut n’a besoin d’aucun CSS par élément.
- Cliquez un bloc dans l’aperçu pour le sélectionner : le contour blanc indique la cellule que les champs d’étendue modifient, et un second clic la désélectionne.
- Les préréglages écrasent les tailles de pistes et les gouttières : appliquez d’abord le préréglage, puis faites vos réglages, et non l’inverse.
Dépannage
L’aperçu ne ressemble pas du tout à ma page.
Le conteneur d’aperçu fait 100 % de large avec 300 pixels de hauteur minimale et aucun autre style, alors que votre page a sa propre largeur, ses marges internes et sa typographie. Collez le code dans votre mise en page pour juger : les propriétés de grille sont identiques, seule la boîte autour diffère.
Changer le nombre de colonnes a réinitialisé mes étendues.
Modifier le nombre de colonnes ou de lignes reconstruit la liste des éléments et les replace sur la grille par défaut, car une étendue qui visait la colonne quatre n’a plus de sens dans une grille de trois. Fixez d’abord la taille de la grille, puis ajustez les cellules.
Un préréglage a effacé les tailles de pistes que j’avais saisies.
Les préréglages fixent les colonnes, les lignes, toutes les tailles de pistes et, pour Gallery et Cards, les gouttières. C’est leur rôle. Appliquez le préréglage comme point de départ puis modifiez ensuite ; il n’y a pas d’annulation, copiez donc le CSS avant si vous voulez le conserver.
La gouttière semble inversée.
Le raccourci imprime d’abord la gouttière de ligne puis celle de colonne : gap: 8px 24px met 8 pixels entre les lignes et 24 entre les colonnes. Si cette lecture vous gêne, mettez la même valeur des deux côtés et l’ambiguïté disparaît.
Les boutons de copie ne font rien.
Ils utilisent l’API presse-papiers du navigateur, qui exige une page sécurisée et un vrai clic, et qu’une extension peut bloquer. Si le bouton ne passe pas à la coche, sélectionnez le code dans le panneau noir et appuyez sur Ctrl+C, ou Cmd+C sur Mac.
Questions fréquemment posées
Mettez display: grid sur le conteneur, décrivez les pistes avec grid-template-columns et grid-template-rows, et l’espacement avec gap. Cette page écrit exactement cela : la valeur par défaut produit .grid-container { display: grid; grid-template-columns: 1fr 1fr 1fr; grid-template-rows: 1fr 1fr 1fr; gap: 16px 16px; } et les neuf div enfants qui vont avec.
Un éditeur visuel des propriétés du conteneur. Au lieu de taper grid-template-columns puis de recharger pour voir le résultat, vous réglez colonnes, lignes, gouttières et tailles de pistes avec des champs, observez une grille réelle réagir et copiez la règle finale. La sortie est du CSS simple, sans framework ni conventions de classes à apprendre.
C’est une fraction de l’espace libre restant une fois les pistes fixes et les gouttières déduites. Trois colonnes de 1fr prennent chacune un tiers du reste ; 1fr 2fr 1fr donne la moitié à la colonne centrale. Le préréglage Holy Grail mêle les deux idées : 200px 1fr 200px fixe les colonnes extérieures et laisse le centre absorber le reste.
Ils répondent à des problèmes différents plutôt qu’ils ne rivalisent. Grid place les éléments en lignes et en colonnes en même temps, ce que génère cet outil ; Flexbox aligne sur un seul axe et convient mieux à une rangée de boutons ou à une barre de navigation. Une page utilise couramment grid pour la mise en page générale et flex à l’intérieur des cellules.
Oui, et c’est courant. Un enfant de grille peut lui-même être en display: flex : la règle de conteneur de cette page positionne le bloc, et une règle flex que vous ajoutez agence son contenu. Rien dans le CSS généré ne l’empêche : la règle .grid-container ne concerne que le placement des enfants directs.
Avec le bloc Alignement. justify-items: center centre chaque élément horizontalement dans sa cellule et align-items: center le centre verticalement ; justify-content et align-content déplacent la grille entière dans le conteneur quand les pistes ne le remplissent pas. Réglez-les ici et les propriétés n’apparaissent dans le CSS que si elles diffèrent de stretch.
Cliquez ce bloc dans l’aperçu pour le sélectionner, puis changez sa fin de colonne. Le CSS généré gagne une règle .item-N avec grid-column: début / fin pour cette seule cellule — par exemple grid-column: 1 / 3 couvre les deux premières colonnes. Les cellules non touchées restent absentes du CSS.
Oui. Grid est pris en charge depuis des années par tous les grands navigateurs actuels, et les propriétés écrites par cet outil — display, grid-template-columns, grid-template-rows, gap et les quatre propriétés d’alignement — sont les propriétés standard, sans préfixe. Pour un navigateur antérieur, une solution de repli en flex reste la voie habituelle.
Historiquement, c’était l’ensemble de classes de colonnes d’un framework, par exemple une rangée de douze colonnes servant à bâtir les pages. CSS Grid remplace cela par un mode de mise en page intégré au langage : au lieu d’ajouter des classes, on déclare les pistes. D’où un code produit ici avec une seule classe de conteneur et aucune classe de comptage de colonnes.
Le bloc style va dans votre feuille de styles ou dans un élément style, et les div là où la mise en page doit apparaître. Les boutons Copier CSS et Copier HTML séparent les deux, tandis que Tout copier vous donne le bloc style et le balisage ensemble — le plus rapide pour tester dans un fichier vierge.