Générateur CSS Grid
Construisez une grille CSS (colonnes, lignes, gap) en direct et copiez le CSS.
- Instantané
- Gratuit
- Privé (traité localement)
- Sans inscription
Une grille CSS, montée en direct
Choisissez le nombre de colonnes, de lignes et l’espacement : l’aperçu affiche les cellules en temps réel et le CSS du conteneur est prêt à copier.
-
Réglez les colonnes
De 1 à 8 pistes égales (1fr).
-
Réglez les lignes et le gap
Nombre de lignes et espacement.
-
Copiez le CSS
À appliquer sur votre conteneur grid.
Le CSS du conteneur (par défaut)
| Propriété | Valeur |
|---|---|
| display | grid |
| grid-template-columns | repeat(3, 1fr) |
| grid-template-rows | repeat(2, 1fr) |
| gap | 8px |
L’unité 1fr partage l’espace à parts égales. Pour du responsive, remplacez par repeat(auto-fit, minmax(...)). Tout est généré localement.
Questions fréquentes
Quelle différence entre CSS Grid et Flexbox ?
Flexbox dispose les éléments sur un seul axe (ligne ou colonne) ; Grid travaille en deux dimensions (colonnes et lignes simultanément). Grid est idéal pour des mises en page complètes, Flexbox pour des alignements simples.
Que signifie repeat(3, 1fr) ?
C’est un raccourci pour « 3 colonnes de 1 fraction chacune ». L’unité fr répartit l’espace disponible à parts égales. repeat(3, 1fr) crée donc trois colonnes de largeur identique qui remplissent le conteneur.
Comment rendre la grille responsive ?
Remplacez un nombre fixe par repeat(auto-fit, minmax(200px, 1fr)) : les colonnes s’ajustent automatiquement selon la largeur. Cet outil génère une base à nombre fixe, que vous pouvez adapter ensuite.
Le CSS s’applique-t-il au conteneur ou aux cellules ?
Au conteneur : display: grid et les propriétés grid-template définissent la structure. Les cellules enfants se placent automatiquement dans les pistes créées.