Stax

Générateur de CSS Grid

Construisez visuellement des mises en page CSS Grid avec aperçu en direct.

grid-template-columns

grid-template-rows

1
2
3
4
5
6
7
8
9
.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 100px);
  gap: 8px;
}

Qu'est-ce que le générateur CSS Grid ?

Cet outil visuel crée layouts CSS Grid — rangées, colonnes, gaps et grid areas. Placez items avec drag-drop, utilisez unités fr pour taille responsive. Parfait pour layouts de page, dashboards, grilles de cartes.

Comment utiliser le générateur

  1. Sélectionnez nombre de rangées et colonnes.
  2. Établissez taille de chaque track (fr, px, %).
  3. Ajustez gap (entre rangée et colonne).
  4. Placez items dans cellules spécifiques.
  5. Copiez le CSS généré.

Fonctionnalités de Grid

  • Unités fr — distribution fractionnelle de l'espace
  • Areas template grid — layout visuel
  • minmax() — tailles de track flexibles
  • auto-fit / auto-fill — grilles responsives

Questions fréquemment posées

Comment fonctionne CSS Grid ?
Grid est un système de layout 2D — contrôle rangées et colonnes. Le conteneur a display: grid; grid-template-columns: 1fr 1fr 1fr; (3 colonnes égales). Les items se placent automatiquement ou explicitement avec grid-area.
Qu'est-ce que l'unité fr ?
fr = unité fractionnelle, partie de l'espace disponible. 1fr 2fr 1fr = 25% 50% 25%. Mieux que pixel/pourcentage — responsive automatiquement. minmax(min, max) pour colonnes flexibles : minmax(200px, 1fr).
Que sont grid template areas ?
Façon de définir layout visuellement. grid-template-areas: "header header" "sidebar main" "footer footer". Puis assignez items avec grid-area: header. Le code devient très lisible.
Différence entre auto-fit et auto-fill ?
Tous deux s'utilisent en repeat() pour grilles responsives. auto-fill — crée tracks vides (quand il y a espace). auto-fit — réduit tracks vides (les items s'étendent). Pour cartes/galeries, auto-fit est plus commun.

Outils associés