Générateur CSS Grid
Construisez des mises en page CSS Grid en visuel : grid-template-columns/rows, zones nommées validées, gouttières, alignement et placement par élément. CSS à copier.
Préréglages
Conteneur
Une ligne par rangée, noms séparés par des espaces, un point (.) pour une cellule vide. Chaque nom doit former un rectangle.
Élément 1
Sélectionnez un élément ici ou cliquez dessus dans l’aperçu.
Exemples : 1 / 3, span 2, 2 / -1. Un nom de zone remplace le placement par lignes.
Aperçu
Faites glisser le coin inférieur de l’aperçu pour redimensionner le conteneur.
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
}Outils Connexes
Voir ToutQu'est-ce que Générateur CSS Grid ?
Un constructeur de mises en page CSS Grid où vous saisissez n'importe quel modèle de pistes (par exemple repeat(auto-fill, minmax(120px, 1fr))), dessinez des zones nommées, réglez les gouttières et l'alignement, et placez chaque élément par numéros de lignes, étendues ou noms de zones. L'aperçu en direct utilise le CSS généré.
Comment utiliser Générateur CSS Grid
- Partez d'un préréglage (3 colonnes, Cartes adaptatives, Mise en page Saint-Graal, Barre latérale, Bento) ou saisissez grid-template-columns et grid-template-rows.
- Écrivez éventuellement grid-template-areas : une ligne par rangée, noms séparés par des espaces, un point pour une cellule vide.
- Réglez row-gap, column-gap, justify-items, align-items et le Nombre d'éléments.
- Sélectionnez un élément et réglez grid-column, grid-row (par ex. 1 / 3, span 2) ou choisissez une grid-area.
- Copiez le code CSS.
Exemple
grid-template-columns 200px 1fr, row-gap 8px, column-gap 16px; item 2: grid-column 1 / 3, grid-row span 2
.container {
display: grid;
grid-template-columns: 200px 1fr;
gap: 8px 16px;
}
.item-2 {
grid-column: 1 / 3;
grid-row: span 2;
} Quand utiliser Générateur CSS Grid
Utilisez grid pour les mises en page à deux dimensions : squelettes de pages, tableaux de bord, galeries et grilles de cartes. Pour une seule ligne ou colonne d'éléments dimensionnés selon leur contenu, flexbox est souvent plus simple (voir le générateur Flexbox CSS).
Comment fonctionne Générateur CSS Grid
Les modèles et valeurs de placement sont vérifiés avec le CSS.supports() du navigateur : tout ce qui est valide en CSS est accepté et les valeurs invalides sont signalées. Le texte des zones est validé : chaque rangée doit avoir le même nombre de cellules et chaque nom doit former un seul rectangle. La sortie contient display: grid, les modèles, grid-template-areas avec une chaîne entre guillemets par rangée, gap (une seule valeur si les gouttières de ligne et de colonne sont égales, ligne colonne sinon) et l'alignement uniquement s'il n'est pas stretch. Les éléments reçoivent des règles grid-area ou grid-column/grid-row uniquement lorsqu'elles sont définies.
Cas d'utilisation courants
- Squelettes de pages avec en-tête, barre latérale, contenu principal et pied de page
- Galeries de cartes adaptatives avec auto-fill et minmax()
- Tableaux de bord de style bento avec tuiles qui s'étendent
- Mises en page de magazine avec zones nommées
- Mises en page de formulaires avec colonnes d'étiquettes et de champs
Questions Fréquentes
Pourquoi dit-il que ma zone n'est pas un rectangle ?
Dans grid-template-areas, chaque nom doit occuper un bloc rectangulaire de cellules. Les formes en L ou les noms éclatés en plusieurs endroits sont du CSS invalide et toute la propriété serait ignorée.
Quelle différence entre auto-fill et auto-fit ?
Les deux créent autant de colonnes que possible. auto-fill conserve les pistes vides, tandis qu'auto-fit les réduit pour que les éléments existants s'étirent et remplissent la ligne.
Comment faire occuper toute la largeur à un élément ?
Réglez grid-column sur 1 / -1 ; -1 désigne la dernière ligne de la grille.