Générateur CSS Grid
Aperçu en direct
Pourquoi utiliser un générateur visuel CSS Grid ?
CSS Grid est le système de mise en page le plus puissant en CSS, mais sa syntaxe — grid-template-columns, grid-template-rows, unités fr, minmax(), repeat() — a une courbe d'apprentissage prononcée. Notre générateur visuel vous permet de configurer votre grille via des curseurs et listes déroulantes et de voir votre mise en page se mettre à jour instantanément, afin que vous compreniez l'effet de chaque propriété sans plonger dans la documentation MDN.
Aperçu de grille en direct
Voyez votre grille se mettre à jour en temps réel à mesure que vous ajustez colonnes, lignes, espacement et alignement
Support des unités fr
Les modèles utilisent des unités fractionnaires (fr) pour des grilles flexibles et responsives qui s'adaptent à la taille du conteneur
Sortie CSS prête à l'emploi
Exporte un bloc CSS .container propre avec grid-template-columns, rows, gap et align-items
Comment créer une mise en page CSS Grid
Définissez les colonnes et les lignes
Utilisez les curseurs pour définir le nombre de colonnes et de lignes pour votre grille
Choisissez le modèle et l'espacement
Sélectionnez un modèle de colonnes (égal, fixe+flex, minmax responsive) et ajustez l'espacement entre les cellules
Copiez le CSS
Cliquez sur 'Copier le CSS' pour obtenir le bloc CSS complet prêt à coller dans votre feuille de style
Cas d'utilisation de CSS Grid
Mises en page de pages
Construisez proprement les structures en-tête/colonnes latérales/contenu principal/pied de page avec des zones de grille nommées
Tableaux de bord
Créez des mises en page de tableau de bord complexes avec des cartes de tailles variées via des extensions grid-column et grid-row
Galeries d'images
Construisez des galeries d'images de type maçonnerie ou uniformes avec auto-fill et minmax pour la responsivité
Mises en page magazine
Créez des mises en page éditoriales avec des colonnes asymétriques et des éléments vedettes s'étendant sur plusieurs cellules
Bonnes pratiques CSS Grid
✓ Préférez les unités fr aux pourcentages
L'unité fr (fraction) distribue l'espace disponible après les colonnes de taille fixe, évitant de calculer manuellement les pourcentages pour les colonnes flexibles.
✓ Utilisez minmax() pour les grilles responsives
repeat(auto-fill, minmax(250px, 1fr)) crée une grille responsive qui ajuste automatiquement le nombre de colonnes — sans media queries.
✓ Utilisez les zones de grille nommées
grid-template-areas avec des cellules nommées (header, sidebar, main, footer) rend les mises en page de pages lisibles et faciles à modifier.
✓ Comprendre auto-fill vs auto-fit
auto-fill crée autant de pistes que possible (en laissant des pistes vides). auto-fit réduit les pistes vides et étend les éléments existants — généralement préférable pour les grilles de cartes.
❓ Foire aux questions
Qu'est-ce qu'une unité fr en CSS Grid ?
fr signifie 'unité fractionnaire'. 1fr représente une fraction de l'espace libre disponible dans le conteneur de grille. repeat(3, 1fr) crée 3 colonnes égales partageant également tout l'espace disponible.
En quoi CSS Grid diffère-t-il de Flexbox ?
Flexbox est unidimensionnel — il dispose des éléments le long d'un seul axe (ligne ou colonne). CSS Grid est bidimensionnel — il contrôle simultanément lignes et colonnes, ce qui le rend bien plus puissant pour les mises en page de pages.
Que fait minmax() ?
minmax(min, max) définit une plage de taille pour une piste de grille. minmax(200px, 1fr) signifie qu'une colonne a au moins 200px de large mais peut s'agrandir pour occuper l'espace disponible — idéal pour les grilles responsives.
Quand utiliser CSS Grid plutôt que Flexbox ?
Utilisez Grid pour les mises en page 2D où vous avez besoin de contrôle simultané des lignes et des colonnes. Utilisez Flexbox pour les mises en page de composants 1D comme les barres de navigation et les lignes de formulaire. La plupart des mises en page modernes utilisent les deux.