Générateur de système de grille CSS
Générez une grille de colonnes responsive avec vos propres points de rupture, colonnes, gouttières, marges et largeur maximale. Export CSS, classes utilitaires ou configuration Tailwind.
Chargement de Générateur de grille CSS…
Vos fichiers ne quittent jamais votre appareil
Comment utiliser Générateur de grille CSS
- 1
Ouvrez Générateur de grille CSS sur cette page. Il se charge directement dans votre navigateur.
- 2
Ajoutez votre fichier, texte ou valeurs et ajustez les réglages.
- 3
Copiez ou téléchargez le résultat. Rien n'est envoyé ni stocké.
À propos de cet outil
Un système de grille donne à chaque page la même structure de base : un nombre fixe de colonnes, des gouttières régulières et une largeur de contenu maximale, qui s'adaptent à chaque taille d'écran. Ce générateur de système de grille vous permet de définir cette structure une fois et d'exporter un code prêt à l'emploi, pour que designers et développeurs travaillent sur la même grille.
Comment créer une grille
- Définissez la largeur de contenu maximale en pixels.
- Modifiez les points de rupture : pour chaque taille d'écran, choisissez le nombre de colonnes, la gouttière entre elles et la marge extérieure.
- Vérifiez l'aperçu en direct des colonnes.
- Choisissez un préfixe de classe si vous exportez des classes.
- Copiez le code en CSS simple, en classes utilitaires ou en configuration Tailwind.
Une configuration typique
| Écran | Colonnes | Gouttière |
|---|---|---|
| Téléphone | 4 | 16px |
| Tablette | 8 | 24px |
| Ordinateur | 12 | 24 à 32px |
Douze colonnes sont populaires parce qu'elles se divisent proprement en moitiés, tiers, quarts et sixièmes.
Conseils
- Alignez-vous sur votre maquette : utilisez les mêmes colonnes et gouttières que la grille de mise en page de Figma.
- Limitez la longueur des lignes : une largeur maximale d'environ 1200 à 1440px garde le texte lisible sur grand écran.
- Utilisez une échelle d'espacement : des gouttières et marges de 8, 16, 24 ou 32px donnent un espacement cohérent.
- Laissez le contenu décider des points de rupture : ajoutez-en un là où la mise en page commence à casser, pas seulement aux tailles d'appareils.
Système de grille ou CSS grid ?
Un système de grille est une convention de design ; CSS grid est la fonctionnalité du navigateur qui peut l'appliquer. Le CSS généré utilise du CSS moderne et n'a besoin d'aucun framework. Pour les mises en page à une dimension dans la grille, utilisez le générateur Flexbox, et définissez les tailles de texte avec le générateur d'échelle typographique.
Questions fréquentes
Combien de colonnes doit avoir une grille ?
Douze colonnes sur ordinateur est le choix le plus courant, car elles se divisent en moitiés, tiers et quarts. Les téléphones utilisent généralement 4 colonnes et les tablettes 8.
Qu'est-ce qu'une gouttière ?
L'espace entre les colonnes. Les gouttières courantes font 16px sur téléphone et 24 à 32px sur les écrans plus grands.
Puis-je exporter la grille pour Tailwind ?
Oui. Choisissez le format Tailwind pour obtenir une configuration de vos écrans et espacements.
Puis-je définir mes propres points de rupture ?
Oui. Modifiez la largeur, les colonnes, la gouttière et la marge de chaque point de rupture.
Quelle largeur maximale utiliser ?
Entre 1200 et 1440 pixels environ convient à la plupart des sites et garde des lignes de texte d'une longueur confortable sur les écrans larges.
Le code nécessite-t-il Bootstrap ou un autre framework ?
Non. Le CSS et les classes générés sont du CSS pur qui fonctionne seul.