MoreOnlineTools
ESC

Generateur CSS Grid

Playground visuel pour creer des layouts CSS Grid avec apercu en direct

Proprietes du Conteneur Grid

Colonnes 3
Taille de Colonne
Lignes 3
Taille de Ligne
gap (px) 10
justify-items
align-items
Nombre d'Elements 6

Proprietes de l'Element Grid

Selectionner un Element
grid-column-start
grid-column-end
grid-row-start
grid-row-end

Presets de Layout

Apercu en Direct

CSS Genere

Tout le traitement se fait dans votre navigateur. Aucune donnee n'est envoyee.

Exemples d'Utilisation

Layout 2 Colonnes

Creez un layout simple a deux colonnes pour le contenu et la barre laterale.

Grille de Tableau de Bord

Construisez un layout de tableau de bord avec des widgets de differentes tailles.

Galerie d'Images

Creez une grille de galerie d'images responsive avec des cellules de taille egale.

Fonctionnalites

Apercu Visuel en Direct

Voyez votre layout grid se mettre a jour en temps reel

Code CSS Pret a l'Emploi

Obtenez du code CSS propre pour le conteneur grid et les elements

Presets de Layout

Demarrez avec des presets grid courants

Extension d'Elements Grid

Configurez des elements pour s'etendre sur plusieurs colonnes ou lignes

Comment Utiliser?

1

Definir les Proprietes Grid

Choisissez colonnes, lignes, tailles, gap et alignement.

2

Configurer les Elements

Ajoutez des elements et configurez grid-column et grid-row.

3

Copier le CSS

Copiez le code CSS genere et utilisez-le dans votre projet.

Questions Frequentes

Utilisez Grid pour les layouts bidimensionnels où vous avez besoin de contrôler simultanément les lignes et les colonnes — structures de page comme en-tête/barre latérale/contenu/pied de page, cartes de tableau de bord et galeries photo. Utilisez Flexbox pour l'alignement unidimensionnel à l'intérieur d'un composant, par exemple pour centrer des éléments dans une barre de navigation ou distribuer des boutons sur une ligne. Grid et Flexbox se complètent : Grid gère la mise en page macro, Flexbox gère l'alignement micro à l'intérieur de chaque cellule.

fr signifie "fraction de l'espace libre disponible". Une fois que les colonnes à taille fixe (px, auto) ont consommé leur espace, la largeur restante est divisée en fractions. grid-template-columns: 1fr 2fr 1fr crée trois colonnes où la colonne centrale reçoit deux fois plus d'espace que chacune des colonnes latérales. L'utilisation de fr est la méthode recommandée pour créer des grilles fluides qui s'adaptent à différentes largeurs d'écran sans media queries.

Séparez chaque taille de piste par un espace : grid-template-columns: 200px 1fr 1fr crée une barre latérale fixe de 200px et deux colonnes fluides égales. Vous pouvez mélanger les unités : 1fr auto 1fr réduit la colonne centrale à la largeur de son contenu. Le raccourci repeat() simplifie les répétitions : repeat(3, 1fr) est identique à 1fr 1fr 1fr. Cet outil génère le raccourci correct dans la sortie CSS.

gap (anciennement grid-gap) ajoute de l'espace entre les pistes de la grille, pas sur les bords extérieurs. C'est presque toujours ce que vous souhaitez : des gouttières régulières entre les cellules sans rembourrage supplémentaire autour du conteneur. margin ajoute de l'espace autour des éléments individuels de la grille, ce qui devient irrégulier sur les bords et augmente la taille globale du conteneur. Utilisez gap pour les gouttières et padding sur le conteneur de la grille pour créer de l'espace autour de l'ensemble du layout.

Définissez grid-column-start et grid-column-end sur l'élément. Par exemple, grid-column: 1 / 3 fait démarrer l'élément à la ligne 1 et se terminer à la ligne 3, couvrant ainsi 2 colonnes. Vous pouvez également utiliser le mot-clé span : grid-column: span 2. La même logique s'applique aux lignes avec grid-row. Sélectionnez un élément de grille dans cet outil et définissez ses valeurs de début/fin pour générer automatiquement le CSS correct.

Les deux fonctionnent avec repeat() pour créer autant de pistes que le conteneur peut en accueillir : repeat(auto-fill, minmax(200px, 1fr)). La différence apparaît lorsque les éléments ne remplissent pas toutes les colonnes disponibles. auto-fill conserve les colonnes vides dans la grille, maintenant la structure des pistes. auto-fit réduit les colonnes vides à zéro et permet aux éléments remplis de s'étendre pour utiliser l'espace. Pour la plupart des grilles de cartes responsives, auto-fit offre un comportement plus naturel.

grid-template-areas vous permet de définir le layout avec une carte visuelle de style ASCII. Exemple : grid-template-areas: "header header" "sidebar content" "footer footer". Ensuite, assignez les éléments aux zones avec grid-area: header, grid-area: sidebar, etc. Cela rend les layouts complexes lisibles et faciles à restructurer avec une media query — il suffit de redéfinir grid-template-areas pour le nouveau point de rupture.

Non. Tout s'exécute dans votre navigateur. Vos configurations de grille ne quittent jamais votre appareil.

Qu'est-ce que le Generateur CSS Grid?

Le Generateur CSS Grid est un terrain de jeu visuel ou vous configurez colonnes, lignes, espacement et extension d'elements, et voyez le layout se mettre a jour en direct. Quand le resultat vous convient, copiez le CSS propre dans votre projet. Sans memoriser la syntaxe.

Fonctionnalites cles

Configurez colonnes et lignes avec des tailles flexibles (fr, px, auto). Ajustez gap, justify-items et align-items au niveau conteneur. Selectionnez des elements individuels pour definir les valeurs grid-column/grid-row. Six preselections de layout pour demarrer rapidement.

Cas d'utilisation courants

Layouts de page avec en-tete, barre laterale, contenu principal et pied de page. Layouts dashboard avec des widgets de tailles differentes. Galeries photo a cellules uniformes. Layouts magazine ou certains articles s'etendent sur plusieurs colonnes.

Conseils

Utilisez les unites fr pour des layouts fluides qui s'adaptent a la taille d'ecran. La propriete gap est plus propre que d'ajouter des marges a chaque cellule. Commencez par une preselection, puis ajustez les tailles.

Confidentialite

Fonctionne entierement dans votre navigateur. Aucune configuration grid ni donnee ne quitte votre machine.

Sécurité et Confidentialité

La sécurité de vos données est notre priorité

Traitement Local

Tout le traitement se fait dans votre navigateur

Aucun Transfert de Données

Vos données ne sont pas envoyées à nos serveurs

Aucun Stockage de Données

Aucune donnée n'est stockée ou partagée

Chiffrement SSL

Chiffrement SSL pour une connexion sécurisée

Étape Suivante

Générateur CSS Flexbox

Playground visuel CSS Flexbox avec aperçu en direct et génération de code

Générateur de Tableaux HTML

Constructeur visuel de tableaux HTML avec aperçu en direct

Outils connexes

Formateur XML

Embellir et valider le code XML

Générateur Robots.txt

Générer un fichier robots.txt pour votre site web

Visionneuse de code SVG

Assistants développeur pour JSON, formatage de code et débogage.

Générateur de Règles de Réécriture

Générez des règles de redirection et réécriture pour Apache (.htaccess), Nginx e...

Bibliotheque de Modeles Regex

Parcourez, recherchez et testez 35+ modeles regex prets a utiliser

Encodeur/Décodeur URL

Encoder et décoder les URLs et composants URI

Aussi sur MoreOnlineTools

Outils en Ligne Gratuits

109 outils pour texte, images, sécurité et développement

Voir Tous les Outils →
Aide-Mémoires Développeur

Référence rapide pour Regex, Git, codes HTTP, CSS, Markdown et plus

Voir les Aide-Mémoires →
Calculatrices en Ligne

IMC, prêt, pourcentage, pourboire, âge et plus de calculatrices pratiques

Voir les Calculatrices →
Collections d'Outils

Workflows sélectionnés : développement API, pipeline image, audit sécurité et plus

Voir les Collections →