Comment utiliser : Générateur CSS Grid
- Définissez le nombre de colonnes et de lignes ainsi que les espacements, ou partez d’un modèle comme Holy grail.
- Modifiez la taille des pistes (au-dessus de la grille pour les colonnes, à gauche pour les lignes) :
1fr,240px,auto,minmax(0, 1fr). - Tracez sur les cellules pour créer une zone, puis donnez-lui un nom comme
headerousidebar. - Copiez le CSS et le squelette HTML dans votre projet.
Les zones de grille en bref
grid-template-areas vous permet de dessiner la mise en page avec des noms : chaque chaîne représente une ligne, chaque mot une colonne, et un point (.) laisse une cellule vide. Les éléments enfants sont placés avec grid-area: nom, si bien que le CSS se lit comme un schéma de la page.
.layout {
display: grid;
grid-template-columns: 240px 1fr;
grid-template-areas:
"header header"
"sidebar main";
}Tailles des pistes
| Valeur | Signification |
|---|---|
1fr | une part de l’espace disponible |
minmax(0, 1fr) | comme 1fr, mais un contenu long ne peut pas étirer la colonne |
auto | aussi grand que le contenu |
240px, 20rem | une taille fixe |
repeat(auto-fill, minmax(200px, 1fr)) | autant de colonnes que possible — idéal pour les grilles de cartes |
Les zones doivent être rectangulaires : l’outil ne permet de tracer que des rectangles, le CSS est donc toujours valide. Pour une seule ligne ou colonne d’éléments, flexbox est souvent plus simple. Voir aussi : Clamp Calculator, CSS Formatter.
Aussi recherché comme : générateur de grille css, créateur css grid, grid-template-areas generator, template css grid, générateur grille responsive, css grid en ligne, générateur de mise en page.
Outils complémentaires : Générateur CSS Grid
- Générateur Flexbox CSS — Visualisez précisément l'effet de chaque propriété flexbox : définissez la direction, le retour à la ligne, justify-content, align-items et l'espacement, ajoutez ou supprimez des éléments, et cliquez sur un élément pour régler son flex-grow, son shrink, sa basis, son order et son align-self.
- Générateur border-radius — Arrondissez les coins de n'importe quel élément : utilisez un seul curseur pour tous les coins, ou réglez chaque coin séparément.
- Générateur d’ombres CSS — Empilez plusieurs couches d’ombre, ajustez les décalages, le flou, l’étalement et l’opacité sur une carte en direct, puis copiez le CSS box-shadow ou text-shadow.
- Générateur de dégradé CSS — Concevez un dégradé visuellement : faites glisser les arrêts de couleur, modifiez l’angle ou le type, partez d’un préréglage, puis copiez un CSS prêt pour la production avec une couleur de repli unie.
Questions fréquentes
Comment créer une mise en page CSS Grid ?
Définissez les colonnes et les lignes, tracez sur les cellules pour créer des zones nommées (header, sidebar, main…), puis copiez le CSS généré (grid-template-columns, grid-template-rows et grid-template-areas) avec le HTML.
Quelle est la différence entre 1fr et minmax(0, 1fr) ?
1fr a comme minimum la taille de son contenu : un mot long ou une image large peut donc faire grandir la colonne. minmax(0, 1fr) permet à la colonne de rétrécir en dessous de la taille de son contenu, ce qui garde les colonnes égales.
Pourquoi les zones de grille doivent-elles être rectangulaires ?
La spécification CSS Grid n’autorise que des zones nommées rectangulaires ; une zone en forme de L rend toute la déclaration grid-template-areas invalide.
Comment rendre la grille responsive ?
Ajoutez une media query qui redéfinit grid-template-columns et grid-template-areas pour les petits écrans, par exemple une seule colonne avec « header » « main » « sidebar ».
Puis-je installer Générateur CSS Grid en tant qu’application web et l’utiliser hors ligne ?
Oui. Générateur CSS Grid est une application web installable (PWA) : elle s’installe depuis votre navigateur, sans passer par une boutique d’applications. Cliquez sur « Installer l’application » en haut de cette page dans Chrome ou Edge (Windows, macOS, Linux, ChromeOS) ; sur Android, utilisez « Partager » → « Ajouter à l’écran d’accueil » sur iPhone et iPad ; ou « Fichier » → « Ajouter au Dock » dans Safari 17+ sur Mac. L’application s’ouvre alors dans sa propre fenêtre avec sa propre icône, et comme elle s’exécute entièrement dans votre navigateur, elle continue de fonctionner hors ligne. Firefox sur ordinateur de bureau ne permet pas d’installer d’applications web. Comment fonctionne l’installation.