Générateur CSS Grid
Créez des mises en page grid visuellement — configurez colonnes, lignes et espaces, dessinez des éléments en cliquant ou glissant.
① Définissez colonnes & lignes et tailles de piste ② Cliquez sur des cellules pour ajouter des items ③ Copiez le CSS
Colonnes
Lignes
Espace colonnes (px)
16
Espace lignes (px)
16
Col
C1
C2
C3
Ligne
R1
R2
R3
Preview
CSS généré
.grid-container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr;
column-gap: 16px;
row-gap: 16px;
}Comment utiliser CSS Grid
CSS Grid est un système de mise en page bidimensionnel contrôlant colonnes et lignes simultanément. Utilisez les unités fr pour distribuer l'espace proportionnellement, px pour des tailles fixes, % pour relatives et auto pour s'adapter au contenu. La propriété gap ajoute un espacement uniforme. Définissez les éléments avec grid-column et grid-row via les numéros start / end.
Questions fréquentes
CSS Grid Layout est un système de mise en page bidimensionnel intégré aux navigateurs. Contrairement à Flexbox (qui fonctionne sur un axe), Grid permet de définir des lignes et colonnes explicites et de placer des éléments précisément n'importe où dans la grille.
fr signifie "unité fractionnaire". Elle représente une fraction de l'espace disponible dans le conteneur grid. Par exemple, grid-template-columns: 1fr 2fr 1fr crée trois colonnes où celle du milieu est deux fois plus large que les autres.
Utilisez auto quand vous voulez qu'une colonne ou ligne s'adapte à son contenu. Utilisez fr pour remplir l'espace restant proportionnellement. Les combiner — ex. auto 1fr — crée une barre latérale qui s'adapte au contenu.
gap est l'abréviation pour les deux. gap: 16px définit les deux égaux, gap: 16px 24px définit row-gap en premier. Ils remplacent l'ancien grid-gap désormais déprécié.
grid-column: 1 / 3 place un élément de la ligne 1 à la ligne 3, couvrant 2 colonnes. Alternativement, grid-column: span 2 couvre 2 colonnes depuis la position actuelle. Ce générateur utilise la syntaxe start / end.
Oui. CSS Grid est supporté dans tous les navigateurs modernes depuis 2017 (Chrome 57, Firefox 52, Safari 10.1, Edge 16). Il peut être utilisé en production sans fallbacks.
Ce générateur supporte jusqu'à 12 colonnes et 8 lignes, couvrant la grande majorité des layouts réels. CSS lui-même n'a pas de limite fixe.