Générateur CSS Grid
Le générateur CSS Grid construit des grilles à partir d’un nombre de colonnes et de lignes, d’espacements, de valeurs grid-template personnalisées facultatives et de l’alignement des éléments, avec aperçu en direct et CSS prêt à copier.
À propos de cet outil
Le générateur CSS Grid construit des grilles à partir d’un nombre de colonnes et de lignes, d’espacements, de valeurs grid-template personnalisées facultatives et de l’alignement des éléments, avec aperçu en direct et CSS prêt à copier.
Mode d’emploi
- Définissez le nombre de colonnes et de lignes.
- Réglez les espacements entre colonnes et entre lignes.
- Saisissez si besoin des templates personnalisés, comme 200px 1fr 1fr.
- Choisissez justify-items et align-items, puis cliquez sur Copier le CSS.
Bon à savoir
- L’unité fr partage l’espace libre : 1fr 2fr donne à la deuxième colonne deux fois la largeur de la première.
- repeat(3, 1fr) est le raccourci pour trois colonnes égales.
- column-gap et row-gap définissent les gouttières entre les pistes.
- Grid est bidimensionnel et contrôle les lignes et les colonnes ensemble.
- repeat(auto-fit, minmax(200px, 1fr)) crée une grille responsive sans media queries.
Fonctionne entièrement dans votre navigateur : rien de ce que vous saisissez n’est envoyé ni stocké.
Questions fréquentes
Comment créer une grille à 3 colonnes en CSS ?
Utilisez display: grid; grid-template-columns: repeat(3, 1fr); sur le conteneur, et ajoutez un gap pour l’espacement.
Que signifie fr dans CSS Grid ?
fr représente une fraction de l’espace libre disponible dans le conteneur de grille.
CSS Grid ou Flexbox ?
Grid est idéal pour les mises en page bidimensionnelles comme la structure d’une page ou une grille de cartes ; Flexbox pour les lignes ou colonnes unidimensionnelles.
Comment créer une grille responsive sans media queries ?
Utilisez grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); les colonnes passent alors automatiquement à la ligne selon l’espace disponible.