Générateur de Grid CSS

Contrôles

3
2
8px
8px

Aperçu & CSS

 
   
 
 
   
 
 
 
Comment l'utiliser
 
     
  1. Définissez colonnes & lignes — Faites glisser les curseurs pour définir le nombre de colonnes (1–6) et de lignes (1–4) de votre grille.
    2.  
  2. Ajustez les espacements — L'espacement des colonnes et des lignes ajoute de l'espace entre les pistes indépendamment.
    3.  
  3. Activez auto-fill — Cochez « Auto-fill » pour passer à repeat(auto-fill, minmax(120px, 1fr)) et obtenir une grille entièrement responsive.
    4.  
  4. Aperçu — Des cellules numérotées colorées montrent la structure de la grille en temps réel.
    5.  
  5. Copiez le CSS — Récupérez les valeurs grid-template-columns, grid-template-rows et d'espacement générées.
    6.  
 
 
 
Qu'est-ce que CSS Grid ?
 
CSS Grid Layout est un système de mise en page bidimensionnel qui contrôle simultanément les lignes et les colonnes. Contrairement à flexbox (unidimensionnel), Grid permet de placer les éléments précisément n'importe où sur une grille définie.
 
L'unité fr (unité fractionnaire) répartit l'espace restant proportionnellement. repeat() évite les déclarations répétitives. auto-fill avec minmax() crée des colonnes responsives sans media queries.
 
 
 
Cas d'usage courants
 
 
Galeries de photos
 
Mises en page de tableaux de bord
 
Grilles de cartes produit
 
Pages style magazine
 
Tableaux de tarifs
 
Mises en page de tuiles responsives
 
 
Conseils & bonnes pratiques
 
 
 Utilisez les unités fr 
1fr signifie « une part de l'espace restant ». repeat(3, 1fr) crée trois colonnes égales qui s'adaptent à la largeur du conteneur.
 
 
 Raccourci gap 
Si vos espacements de ligne et de colonne sont égaux, vous pouvez utiliser le raccourci gap au lieu de column-gap et row-gap séparément.
 
 
 auto-fill vs auto-fit 
auto-fill conserve les pistes vides ; auto-fit les réduit. Pour la plupart des grilles responsives sans éléments épars, auto-fill est le choix le plus sûr.
 
 
 Lignes de grille nommées 
Pour les mises en page complexes, nommez les lignes de grille avec la syntaxe [start] et placez les éléments avec grid-column: start / end pour un code lisible et maintenable.
 
 
 
Questions fréquentes
 
 
Quelle différence entre CSS Grid et Flexbox ?
 
Grid est bidimensionnel — il contrôle lignes et colonnes. Flexbox est unidimensionnel — il fonctionne sur un seul axe. Utilisez Grid pour les mises en page au niveau de la page et Flexbox pour l'alignement au niveau des composants.
 
 
 
Que signifie repeat(auto-fill, minmax(120px, 1fr)) ?
 
Cela crée autant de colonnes que possible, chacune d'au moins 120px de large, partageant l'espace restant à parts égales. Cela génère une grille entièrement responsive sans aucune media query.
 
 
 
Comment étendre un élément sur plusieurs colonnes ?
 
Ajoutez grid-column: span 2; au CSS de l'élément pour qu'il occupe deux pistes de colonne. De même, grid-row: span 2 étend sur deux pistes de ligne.
 
 
 
CSS Grid est-il pris en charge dans tous les navigateurs ?
 
Oui. CSS Grid bénéficie d'une large prise en charge dans tous les navigateurs modernes. Les fonctionnalités utilisées ici — repeat(), fr, gap — sont toutes largement disponibles sans préfixe.